diff --git a/public/css/print-lock.css b/public/css/print-lock.css
index aede018..fb55568 100644
--- a/public/css/print-lock.css
+++ b/public/css/print-lock.css
@@ -347,3 +347,9 @@ table.hiprint-printElement-tableTarget {
   text-align: left;
   clear: both;
 }
+
+.temuBarCode {
+  display: flex;
+  flex-direction: column;
+  padding: 1pt 3pt;
+}
diff --git a/public/index.html b/public/index.html
index 6697364..f3256a9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,18 +1,51 @@
 <!DOCTYPE html>
 <html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>css/print-lock.css">
-    <title>TEMU助手</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>css/print-lock.css">
+  <title>TEMU助手</title>
+  <style>
+    .temuBarCode {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      padding: 10pt 10pt;
+      border: 1pt solid #000;
+    }
+
+    .temuBarCode-code {
+      height: 100%;
+    }
+
+    .temuBarCode-top,
+    .temuBarCode-bottom {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 90%;
+    }
+
+    .temuBarCode-middle {
+      width: 80%;
+      height: 60%;
+    }
+  </style>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
 </html>
diff --git a/src/components/print/Print.vue b/src/components/print/Print.vue
index 8f176c8..3b63a5d 100644
--- a/src/components/print/Print.vue
+++ b/src/components/print/Print.vue
@@ -210,7 +210,7 @@
         // eslint-disable-next-line no-undef
         $('#hiprint-printTemplate').empty()
         this.hiprintTemplate = newHiprintPrintTemplate('temulables', {
-          template: template,
+          template: {},
           settingContainer: '#PrintElementOptionSetting',
           fields: [{
             field: 'html',
@@ -281,8 +281,9 @@
 
       elementToString(el) {
         const node = document.createElement('div')
-        node.appendChild(el)
+        node.innerHTML = el.html()
 
+        document.querySelector('body').appendChild(node)
         return node.innerHTML
       },
 
@@ -295,6 +296,7 @@
 
       getHtml() {
         const list = this.labels
+        console.log(printData)
         this.html = this.elementToString(this.hiprintTemplate.getHtml(printData))
 
         console.log(this.html)
@@ -316,6 +318,12 @@
   .print {
     height: 100%;
 
+    .temuBarCode {
+      display: flex;
+      flex-direction: column;
+      padding: 1pt 3pt;
+    }
+
     .print-wrapper {
       display: flex;
       height: calc(100vh - 180px);
diff --git a/src/components/print/customProvider.js b/src/components/print/customProvider.js
index 144a879..d29ce14 100644
--- a/src/components/print/customProvider.js
+++ b/src/components/print/customProvider.js
@@ -11,16 +11,22 @@ export const customProvider = function (options) {
           type: 'html',
           formatter: function (title, options, templateData) {
             console.log(options, templateData)
+            var elId = 'barCode-' + new Date().getTime()
+            $('body').append('<svg id="' + elId + '" width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice"></svg>')
 
-            setTimeout(() => {
-              // eslint-disable-next-line no-undef
-              JsBarcode("#barcode", "1234567890", {
-                format: "code128", // 条形码类型
-                width: 2, // 条的宽度
-                height: 50, // 条形码的高度
-              });
+            console.log(options.width * 0.8)
+            JsBarcode('#'+ elId, '1234567890', {
+              format: "code128",
+              width: 2,
+              height: options.height * 0.6,
+              margin: 0,
+              displayValue: false
             })
-            return `
+
+            const codeHtml = $(`#${elId}`).html()
+            $(`#${elId}`).remove()
+
+            var html = `
               <div class="temuBarCode">
                 <div class="temuBarCode-top">
                   <div class="hiprint-printElement-text-content hiprint-printElement-content">(AA+AAA)*20PCS</div>
@@ -28,7 +34,9 @@ export const customProvider = function (options) {
                 </div>
                 <div class="temuBarCode-middle">
                   <div class="hiprint-printElement-text-content hiprint-printElement-content temuBarCode-code">
-                    <svg id="barcode"></svg>
+                    <svg id="${elId}" style="display: block; width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice">
+                      ${codeHtml}
+                    </svg>
                   </div>
                 </div>
                 <div class="temuBarCode-bottom">
@@ -37,6 +45,7 @@ export const customProvider = function (options) {
                 </div>
               </div>
             `
+            return html
           },
           options: {
             width: 316,
