【新增】打印组件

src/components/print/Print.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="print">
-    <div class="print-wrapper">
+    <div class="print-wrapper" v-if="!isPrint">
       <div class="left">
         <div class="left-wrapper">
           <div class="title">基础元素</div>
@@ -126,7 +126,6 @@
 <script>
   import { hiprint, defaultElementTypeProvider, disAutoConnect } from 'vue-plugin-hiprint'
   import { newHiprintPrintTemplate } from '@/utils/template-helper'
-  import printData from './printData'
   import { customProvider } from './customProvider'
 
   disAutoConnect()
@@ -138,6 +137,41 @@
         default: () => {
           return []
         }
+      },
+
+      printData: {
+        type: Object,
+        default: () => {
+          return {
+          }
+        }
+      },
+
+      template: {
+        type: Object,
+        default: () => {
+          return {
+            "index": 0,
+            "name": 1,
+            "height": 200,
+            "width": 200,
+            "paperHeader": 0,
+            "paperFooter": 547,
+            "printElements": [],
+            "paperNumberLeft": 500,
+            "paperNumberTop": 530,
+            "paperNumberDisabled": true,
+            "paperNumberContinue": true,
+            "fontFamily": "Microsoft YaHei",
+            "scale": 1,
+            "watermarkOptions": {}
+          }
+        }
+      },
+
+      isPrint: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -209,8 +243,14 @@
         providers: [defaultElementTypeProvider(), customProvider({})]
       })
 
-      this.buildLeftElement()
-      this.buildDesigner()
+      if (this.isPrint) {
+        this.hiprintTemplate = newHiprintPrintTemplate('temulables', {
+          template: this.template
+        })
+      } else {
+        this.buildLeftElement()
+        this.buildDesigner()
+      }
     },
 
     methods: {
@@ -280,7 +320,7 @@
         // eslint-disable-next-line no-undef
         $('#hiprint-printTemplate').empty()
         this.hiprintTemplate = newHiprintPrintTemplate('temulables', {
-          template: {},
+          template: this.template,
           settingContainer: '#PrintElementOptionSetting',
           onImageChooseClick: (target) => {
             let input = document.createElement('input')
@@ -302,26 +342,11 @@
 
 
         this.$nextTick(() => {
-          this.hiprintTemplate.design('#hiprint-printTemplate', {
+          !this.isPrint && this.hiprintTemplate.design('#hiprint-printTemplate', {
             grid: true
           })
 
-          this.panel = this.hiprintTemplate.printPanels[0]
-          console.log(this.hiprintTemplate.printPanels[0])
-          // this.hiprintTemplate.printPanels[0].addPrintText({
-          //   type: 'text',
-          //   data: 'XS888888888',
-          //   options: {
-          //     field: 'barcode',
-          //     testData: 'XS888888888',
-          //     height: 32,
-          //     fontSize: 12,
-          //     lineHeight: 18,
-          //     textAlign: 'left',
-          //     textType: 'barcode',
-          //     hideTitle: true
-          //   }
-          // })
+          // this.panel = this.hiprintTemplate.printPanels[0]
         })
       },
 
@@ -348,16 +373,12 @@
       },
 
       print() {
-        let options = { leftOffset: 0, topOffset: 0 }
-        let ext = {
-          callback: () => {
-            console.log('浏览器打印窗口已打开')
-          },
+        this.hiprintTemplate.print(this.printData)
+      },
 
-          styleHandler: () => {
-            return '<style></style>'
-          }
-        }
+      // js打印（不显示设计界面）
+      toPrint (template, printData) {
+        this.hiprintTemplate.update(template)
         this.hiprintTemplate.print(printData)
       },
 
@@ -373,13 +394,13 @@
       },
 
       savePdf() {
-        this.hiprintTemplate.toPdf(printData, '测试导出pdf').then(v => {
+        this.hiprintTemplate.toPdf(this.printData, '测试导出pdf',{scale:2 }).then(v => {
           console.log(v)
         })
       },
 
       getHtml() {
-        this.html = this.elementToString(this.hiprintTemplate.getHtml(printData))
+        this.html = this.elementToString(this.hiprintTemplate.getHtml(this.printData))
         this.isShowPreview = true
       },