From 87e5f960483985b46b180f331b2d0b314631fbd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Tue, 29 Jul 2025 17:45:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/boardGenerate/index1.vue |   2 +-
 src/views/print/externalPrint.vue  | 553 ++++++++++++++++++++--
 src/views/print/externalPrint1.vue | 718 +++++++++++++++++++++++++++++
 3 files changed, 1231 insertions(+), 42 deletions(-)
 create mode 100644 src/views/print/externalPrint1.vue

diff --git a/src/views/boardGenerate/index1.vue b/src/views/boardGenerate/index1.vue
index 8edb9bb..a976230 100644
--- a/src/views/boardGenerate/index1.vue
+++ b/src/views/boardGenerate/index1.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="boardGenerate">
     <div class="top">
-      <el-button @click="nodes.forEach(e=>e.draggable =true)">11</el-button>
+      <!--      <el-button @click="nodes.forEach(e=>e.draggable =true)">11</el-button>-->
       <div class="componentMenu">
         <el-popover
           :width="880"
diff --git a/src/views/print/externalPrint.vue b/src/views/print/externalPrint.vue
index d9a4477..de0911c 100644
--- a/src/views/print/externalPrint.vue
+++ b/src/views/print/externalPrint.vue
@@ -1,67 +1,93 @@
 <template>
-
-  <div style="width: 100%;height: 100vh;overflow: hidden">
+  <div style="width: 100%; height: 100vh; overflow: hidden">
     <div class="left">
       <div id="printInfo" ref="printRef">
-        <div class="content" v-for=" pageData in pageDatas"
-             :style="{pageBreakAfter: 'always',width: cmToPx(pageWidth)+'px',height: cmToPx(pageHeight)+'px',marginBottom:'4px'}">
-          <div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}">
+        <div
+          class="content"
+          v-for="pageData in pageDatas"
+          :style="{ pageBreakAfter: 'always', width: cmToPx(pageWidth) + 'px', height: cmToPx(pageHeight) + 'px', marginBottom: '4px' }"
+        >
+          <div v-for="i in nodes" class="node" :style="{ left: i.position?.x + 'px', top: i.position?.y + 'px' }">
             <template v-if="i.type === 'text'">
-              <TextNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
-                        :pageSize="{width:  cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TextNode>
+              <TextNode
+                v-bind="i"
+                :isView="true"
+                :isPrint="isPrint"
+                :pageData="pageData"
+                :pageSize="{ width: cmToPx(pageWidth), height: cmToPx(pageHeight) }"
+              ></TextNode>
             </template>
             <template v-if="i.type === 'image'">
-              <ImageNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
-                         :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></ImageNode>
+              <ImageNode
+                v-bind="i"
+                :isView="true"
+                :isPrint="isPrint"
+                :pageData="pageData"
+                :page-size="{ width: cmToPx(pageWidth), height: cmToPx(pageHeight) }"
+              ></ImageNode>
             </template>
             <template v-if="i.type === 'barCode'">
-              <BarCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
-                           :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></BarCodeNode>
+              <BarCodeNode
+                v-bind="i"
+                :isView="true"
+                :isPrint="isPrint"
+                :pageData="pageData"
+                :pageSize="{ width: cmToPx(pageWidth), height: cmToPx(pageHeight) }"
+              ></BarCodeNode>
             </template>
             <template v-if="i.type === 'QRCode'">
-              <QRCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
-                          :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></QRCodeNode>
+              <QRCodeNode
+                v-bind="i"
+                :isView="true"
+                :isPrint="isPrint"
+                :pageData="pageData"
+                :pageSize="{ width: cmToPx(pageWidth), height: cmToPx(pageHeight) }"
+              ></QRCodeNode>
             </template>
             <template v-if="i.type === 'dateTime'">
-              <TimeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
-                        :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></TimeNode>
+              <TimeNode
+                v-bind="i"
+                :isView="true"
+                :isPrint="isPrint"
+                :pageData="pageData"
+                :pageSize="{ width: cmToPx(pageWidth), height: cmToPx(pageHeight) }"
+              ></TimeNode>
             </template>
             <template v-if="i.type === 'select'">
-              <SelectNode :isView="true" :isPrint="isPrint" :pageData="pageData"
-                          :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"
-                          v-bind="i"></SelectNode>
+              <SelectNode
+                :isView="true"
+                :isPrint="isPrint"
+                :pageData="pageData"
+                :pageSize="{ width: cmToPx(pageWidth), height: cmToPx(pageHeight) }"
+                v-bind="i"
+              ></SelectNode>
             </template>
-
           </div>
         </div>
       </div>
     </div>
     <div class="right">
-      <el-dropdown split-button type="primary" @click="printFun" @command="switchPrinter" style="margin-right: 8px;">
+      {{ pageDatas }}
+      <el-dropdown split-button type="primary" @click="printFun" @command="switchPrinter" style="margin-right: 8px">
         {{ printName() }}
         <template #dropdown>
           <el-dropdown-menu>
             <el-dropdown-item :command="-1">导出PDF</el-dropdown-item>
             <el-dropdown-item divided :command="0">本地打印</el-dropdown-item>
-            <el-dropdown-item :divided="k===0" :command="i.id" v-for=" (i,k) in printers">{{ i.name }}
+            <el-dropdown-item :divided="k === 0" :command="i.id" v-for="(i, k) in printers">{{ i.name }}
             </el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
     </div>
   </div>
-  <div id="printArea" v-if="printPngList.length>0">
-    <div
-      v-for="(url, index) in printPngList"
-      :key="index"
-      class="print-page"
-    >
+  <div id="printArea" v-if="printPngList.length > 0">
+    <div v-for="(url, index) in printPngList" :key="index" class="print-page">
       <img :src="url" class="print-image" />
     </div>
   </div>
 </template>
 <script setup>
-
 import html2canvas from 'html2canvas';
 import jsPDF from 'jspdf';
 import { options } from '@/views/print/tool.js';
@@ -93,34 +119,478 @@ const printers = ref([
 const printPngList = ref([]);
 const isView = ref(true);
 
+const jsonData = ref('');
 const isPrint = ref(false);
 const printRef = ref();
 const pageWidth = ref(21);
 const pageHeight = ref(29.7);
-const pageDatas = ref([{}, {}]);
+const pageDatas = ref([]);
 const { cmToPx } = options;
 const nodes = ref([]);
-window.addEventListener('message', (event) => {
-  if (event.data === 'print') {
-    printFun();
+let printNode = `[
+  {
+    "id": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
+    "type": "area",
+    "dimensions": {
+      "width": 794,
+      "height": 1123
+    },
+    "computedPosition": {
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "handleBounds": {
+      "source": null,
+      "target": null
+    },
+    "selected": false,
+    "dragging": false,
+    "resizing": false,
+    "initialized": false,
+    "isParent": true,
+    "position": {
+      "x": 0,
+      "y": 0
+    },
+    "data": {},
+    "events": {},
+    "name": "area"
+  },
+  {
+    "id": "text_1902a5ff_d7fc_4750_b634_8a88868f3ddb",
+    "type": "text",
+    "dimensions": {
+      "width": 94,
+      "height": 19
+    },
+    "computedPosition": {
+      "x": 151.1811023622047,
+      "y": 37.79527559055118,
+      "z": 1
+    },
+    "handleBounds": {
+      "source": null,
+      "target": null
+    },
+    "selected": false,
+    "dragging": false,
+    "resizing": false,
+    "initialized": false,
+    "isParent": false,
+    "position": {
+      "x": 151.1811023622047,
+      "y": 37.79527559055118
+    },
+    "data": {
+      "options": {
+        "default": "供应商",
+        "border": [
+          {
+            "type": "top",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "right",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "bottom",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "left",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          }
+        ]
+      },
+      "outputData": {}
+    },
+    "events": {},
+    "name": "text",
+    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
+    "extent": "parent",
+    "style": {
+      "width": "94px",
+      "height": "19px"
+    }
+  },
+  {
+    "id": "text_899234fc_9ace_49c3_8127_fadeabcbd23d",
+    "type": "text",
+    "dimensions": {
+      "width": 94,
+      "height": 19
+    },
+    "computedPosition": {
+      "x": 150.97637795275588,
+      "y": 56.69291338582677,
+      "z": 1
+    },
+    "handleBounds": {
+      "source": null,
+      "target": null
+    },
+    "selected": false,
+    "dragging": false,
+    "resizing": false,
+    "initialized": false,
+    "isParent": false,
+    "position": {
+      "x": 150.97637795275588,
+      "y": 56.69291338582677
+    },
+    "data": {
+      "options": {
+        "default": "客户名称",
+        "border": [
+          {
+            "type": "top",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "right",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "bottom",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "left",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          }
+        ]
+      },
+      "outputData": {}
+    },
+    "events": {},
+    "name": "text",
+    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
+    "extent": "parent",
+    "style": {
+      "width": "94px",
+      "height": "19px"
+    }
+  },
+  {
+    "id": "text_8da299d4_a35b_4ba9_bfac_860c200b6cf3",
+    "type": "text",
+    "dimensions": {
+      "width": 94,
+      "height": 19
+    },
+    "computedPosition": {
+      "x": 245.66929133858267,
+      "y": 56.69291338582677,
+      "z": 1
+    },
+    "handleBounds": {
+      "source": null,
+      "target": null
+    },
+    "selected": false,
+    "dragging": false,
+    "resizing": false,
+    "initialized": false,
+    "isParent": false,
+    "position": {
+      "x": 245.66929133858267,
+      "y": 56.69291338582677
+    },
+    "data": {
+      "options": {
+        "field": "name",
+        "default": "",
+        "border": [
+          {
+            "type": "top",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "right",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "bottom",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "left",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          }
+        ]
+      },
+      "outputData": {}
+    },
+    "events": {},
+    "name": "text",
+    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
+    "extent": "parent",
+    "style": {
+      "width": "94px",
+      "height": "19px"
+    }
+  },
+  {
+    "id": "text_5a3a87dd_1697_43a1_9678_f20421e1f3df",
+    "type": "text",
+    "dimensions": {
+      "width": 396,
+      "height": 19
+    },
+    "computedPosition": {
+      "x": 245.66929133858267,
+      "y": 37.79527559055118,
+      "z": 1
+    },
+    "handleBounds": {
+      "source": null,
+      "target": null
+    },
+    "selected": false,
+    "dragging": false,
+    "resizing": false,
+    "initialized": false,
+    "isParent": false,
+    "position": {
+      "x": 245.66929133858267,
+      "y": 37.79527559055118
+    },
+    "data": {
+      "options": {
+        "field": "DONGLONG HOME TEXTILE CO..,LTD.",
+        "default": "DONGLONG HOME TEXTILE CO..,LTD.",
+        "border": [
+          {
+            "type": "top",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "right",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "bottom",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "left",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          }
+        ]
+      },
+      "outputData": {}
+    },
+    "events": {},
+    "name": "text",
+    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
+    "extent": "parent",
+    "style": {
+      "width": "396px",
+      "height": "19px"
+    }
+  },
+  {
+    "id": "text_e9bde955_7c37_44d0_8c37_265ad44fdd9d",
+    "type": "text",
+    "dimensions": {
+      "width": 75,
+      "height": 19
+    },
+    "computedPosition": {
+      "x": 170.0787401574803,
+      "y": 302.3622047244094,
+      "z": 1
+    },
+    "handleBounds": {
+      "source": null,
+      "target": null
+    },
+    "selected": false,
+    "dragging": false,
+    "resizing": false,
+    "initialized": false,
+    "isParent": false,
+    "position": {
+      "x": 170.0787401574803,
+      "y": 302.3622047244094
+    },
+    "data": {
+      "options": {
+        "field": "deviceName",
+        "default": "",
+        "border": [
+          {
+            "type": "top",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "right",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "bottom",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "left",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          }
+        ]
+      },
+      "outputData": {}
+    },
+    "events": {},
+    "name": "text",
+    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
+    "extent": "parent",
+    "style": {
+      "width": "75px",
+      "height": "19px"
+    }
+  },
+  {
+    "id": "QRCode_94877b0d_0e26_4a8e_b159_8d99120725a0",
+    "type": "QRCode",
+    "dimensions": {
+      "width": 189,
+      "height": 189
+    },
+    "computedPosition": {
+      "x": 415.74803149606294,
+      "y": 264.56692913385825,
+      "z": 1001
+    },
+    "handleBounds": {
+      "source": null,
+      "target": null
+    },
+    "selected": true,
+    "dragging": false,
+    "resizing": false,
+    "initialized": false,
+    "isParent": false,
+    "position": {
+      "x": 415.74803149606294,
+      "y": 264.56692913385825
+    },
+    "data": {
+      "options": {
+        "default": "123123121"
+      },
+      "outputData": {}
+    },
+    "events": {},
+    "name": "QRCode",
+    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
+    "extent": "parent"
+  }
+]`;
+const messageFun = (event) => {
+  console.log(event);
+  if (isJSON(event.data)) {
+    let data = JSON.parse(event.data);
+    if (data.type === 'print') {
+      printFun();
+    }
+    if (data.type === 'JSONDATA') {
+      if (typeof data.message === 'object' && data.message !== null && !Array.isArray(data.message)) {
+        pageDatas.value = [data.message];
+      }
+      if (Array.isArray(data.message)) {
+        pageDatas.value = data.message;
+      }
+    }
+    if (data.type === 'setTemplate') {
+      nodes.value = JSON.parse(printNode || '[]');
+    }
   }
   console.log(event);
-});
+};
+console.log(window.chrome);
+// window.addEventListener('message', messageFun);
 onMounted(() => {
+  window.chrome?.webview?.addEventListener('message', messageFun);
+  window.chrome?.webview?.postMessage('onMounted');
   nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
   const param = route.query.data;
-  if (isJSON(param)) {
-    let data = JSON.parse(param);
+  if (param) {
+    let code = decodeURIComponent(param);
+    if (!code) return;
+    let data = JSON.parse(code);
     if (Array.isArray(data)) {
-
+      pageDatas.value = data;
+    }
+    if (data !== null && typeof data === 'object' && !Array.isArray(data)) {
+      pageDatas.value = [data];
     }
-    // if()
   }
 });
 
 const printInfoObj = {
   id: 'printInfo',
-  preview: false,  // 是否开启预览
+  preview: false, // 是否开启预览
   beforeOpenCallback(vue) {
     console.log('触发打印工具打开前回调');
   },
@@ -151,7 +621,7 @@ const printFun = (e) => {
 
       eles.forEach((ele, index) => {
         pros.push(
-          html2canvas(ele).then(canvas => {
+          html2canvas(ele).then((canvas) => {
             const imgData = canvas.toDataURL('image/png');
             const pdf = new jsPDF();
             pdf.addImage(imgData, 'PNG', 0, 0);
@@ -173,7 +643,7 @@ const printFun = (e) => {
 
       eles.forEach((ele, index) => {
         pros.push(
-          html2canvas(ele).then(canvas => {
+          html2canvas(ele).then((canvas) => {
             const imgData = canvas.toDataURL('image/png');
             printPngList.value.push(imgData);
           })
@@ -181,6 +651,7 @@ const printFun = (e) => {
       });
       Promise.all(pros).then((values) => {
         window.print();
+        window.chrome?.webview?.postMessage('completed');
         isPrint.value = false;
         printPngList.value = [];
       });
@@ -213,7 +684,7 @@ const printName = () => {
   } else if (printType.value === 0) {
     return '本地打印';
   } else {
-    let name = printers?.value?.find(e => e.id === printType?.value)?.name;
+    let name = printers?.value?.find((e) => e.id === printType?.value)?.name;
     return name || '';
   }
 };
diff --git a/src/views/print/externalPrint1.vue b/src/views/print/externalPrint1.vue
new file mode 100644
index 0000000..a106a72
--- /dev/null
+++ b/src/views/print/externalPrint1.vue
@@ -0,0 +1,718 @@
+<template>
+
+  <div style="width: 100%;height: 100vh;overflow: hidden">
+    <div class="left">
+      <div id="printInfo" ref="printRef">
+        <div class="content" v-for=" pageData in pageDatas"
+             :style="{pageBreakAfter: 'always',width: cmToPx(pageWidth)+'px',height: cmToPx(pageHeight)+'px',marginBottom:'4px'}">
+          <div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}">
+            <template v-if="i.type === 'text'">
+              <TextNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
+                        :pageSize="{width:  cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TextNode>
+            </template>
+            <template v-if="i.type === 'image'">
+              <ImageNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
+                         :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></ImageNode>
+            </template>
+            <template v-if="i.type === 'barCode'">
+              <BarCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
+                           :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></BarCodeNode>
+            </template>
+            <template v-if="i.type === 'QRCode'">
+              <QRCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
+                          :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></QRCodeNode>
+            </template>
+            <template v-if="i.type === 'dateTime'">
+              <TimeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
+                        :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></TimeNode>
+            </template>
+            <template v-if="i.type === 'select'">
+              <SelectNode :isView="true" :isPrint="isPrint" :pageData="pageData"
+                          :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"
+                          v-bind="i"></SelectNode>
+            </template>
+
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <el-dropdown split-button type="primary" @click="printFun" @command="switchPrinter" style="margin-right: 8px;">
+        {{ printName() }}
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item :command="-1">导出PDF</el-dropdown-item>
+            <el-dropdown-item divided :command="0">本地打印</el-dropdown-item>
+            <el-dropdown-item :divided="k===0" :command="i.id" v-for=" (i,k) in printers">{{ i.name }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </div>
+  <div id="printArea" v-if="printPngList.length>0">
+    <div
+      v-for="(url, index) in printPngList"
+      :key="index"
+      class="print-page"
+    >
+      <img :src="url" class="print-image" />
+    </div>
+  </div>
+</template>
+<script setup>
+
+import html2canvas from 'html2canvas';
+import jsPDF from 'jspdf';
+import { options } from '@/views/print/tool.js';
+import TextNode from '@/views/print/nodes/textNode.vue';
+import ImageNode from '@/views/print/nodes/image.vue';
+import BarCodeNode from './nodes/barCodeNode.vue';
+import QRCodeNode from './nodes/QRCodeNode.vue';
+import TimeNode from './nodes/timeNode.vue';
+import SelectNode from './nodes/selectNode.vue';
+import { useRoute } from 'vue-router';
+import { isJSON } from '@/utils/scrin.js';
+
+const route = useRoute();
+const printType = ref(0);
+const printers = ref([
+  {
+    id: 1,
+    name: '网络打印机1'
+  },
+  {
+    id: 2,
+    name: '网络打印机2'
+  },
+  {
+    id: 3,
+    name: '网络打印机3'
+  }
+]);
+const printPngList = ref([]);
+const isView = ref(true);
+
+const isPrint = ref(false);
+const printRef = ref();
+const pageWidth = ref(21);
+const pageHeight = ref(29.7);
+const pageDatas = ref([{}, {}]);
+const { cmToPx } = options;
+const nodes = ref([]);
+let printNode = `[
+  {
+    "id": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
+    "type": "area",
+    "dimensions": {
+      "width": 794,
+      "height": 1123
+    },
+    "computedPosition": {
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "handleBounds": {
+      "source": null,
+      "target": null
+    },
+    "selected": false,
+    "dragging": false,
+    "resizing": false,
+    "initialized": false,
+    "isParent": true,
+    "position": {
+      "x": 0,
+      "y": 0
+    },
+    "data": {},
+    "events": {},
+    "name": "area"
+  },
+  {
+    "id": "text_1902a5ff_d7fc_4750_b634_8a88868f3ddb",
+    "type": "text",
+    "dimensions": {
+      "width": 94,
+      "height": 19
+    },
+    "computedPosition": {
+      "x": 151.1811023622047,
+      "y": 37.79527559055118,
+      "z": 1
+    },
+    "handleBounds": {
+      "source": null,
+      "target": null
+    },
+    "selected": false,
+    "dragging": false,
+    "resizing": false,
+    "initialized": false,
+    "isParent": false,
+    "position": {
+      "x": 151.1811023622047,
+      "y": 37.79527559055118
+    },
+    "data": {
+      "options": {
+        "default": "供应商",
+        "border": [
+          {
+            "type": "top",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "right",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "bottom",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "left",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          }
+        ]
+      },
+      "outputData": {}
+    },
+    "events": {},
+    "name": "text",
+    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
+    "extent": "parent",
+    "style": {
+      "width": "94px",
+      "height": "19px"
+    }
+  },
+  {
+    "id": "text_899234fc_9ace_49c3_8127_fadeabcbd23d",
+    "type": "text",
+    "dimensions": {
+      "width": 94,
+      "height": 19
+    },
+    "computedPosition": {
+      "x": 150.97637795275588,
+      "y": 56.69291338582677,
+      "z": 1
+    },
+    "handleBounds": {
+      "source": null,
+      "target": null
+    },
+    "selected": false,
+    "dragging": false,
+    "resizing": false,
+    "initialized": false,
+    "isParent": false,
+    "position": {
+      "x": 150.97637795275588,
+      "y": 56.69291338582677
+    },
+    "data": {
+      "options": {
+        "default": "客户名称",
+        "border": [
+          {
+            "type": "top",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "right",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "bottom",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "left",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          }
+        ]
+      },
+      "outputData": {}
+    },
+    "events": {},
+    "name": "text",
+    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
+    "extent": "parent",
+    "style": {
+      "width": "94px",
+      "height": "19px"
+    }
+  },
+  {
+    "id": "text_8da299d4_a35b_4ba9_bfac_860c200b6cf3",
+    "type": "text",
+    "dimensions": {
+      "width": 94,
+      "height": 19
+    },
+    "computedPosition": {
+      "x": 245.66929133858267,
+      "y": 56.69291338582677,
+      "z": 1
+    },
+    "handleBounds": {
+      "source": null,
+      "target": null
+    },
+    "selected": false,
+    "dragging": false,
+    "resizing": false,
+    "initialized": false,
+    "isParent": false,
+    "position": {
+      "x": 245.66929133858267,
+      "y": 56.69291338582677
+    },
+    "data": {
+      "options": {
+        "field": "name",
+        "default": "",
+        "border": [
+          {
+            "type": "top",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "right",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "bottom",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "left",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          }
+        ]
+      },
+      "outputData": {}
+    },
+    "events": {},
+    "name": "text",
+    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
+    "extent": "parent",
+    "style": {
+      "width": "94px",
+      "height": "19px"
+    }
+  },
+  {
+    "id": "text_5a3a87dd_1697_43a1_9678_f20421e1f3df",
+    "type": "text",
+    "dimensions": {
+      "width": 396,
+      "height": 19
+    },
+    "computedPosition": {
+      "x": 245.66929133858267,
+      "y": 37.79527559055118,
+      "z": 1
+    },
+    "handleBounds": {
+      "source": null,
+      "target": null
+    },
+    "selected": false,
+    "dragging": false,
+    "resizing": false,
+    "initialized": false,
+    "isParent": false,
+    "position": {
+      "x": 245.66929133858267,
+      "y": 37.79527559055118
+    },
+    "data": {
+      "options": {
+        "field": "DONGLONG HOME TEXTILE CO..,LTD.",
+        "default": "DONGLONG HOME TEXTILE CO..,LTD.",
+        "border": [
+          {
+            "type": "top",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "right",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "bottom",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "left",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          }
+        ]
+      },
+      "outputData": {}
+    },
+    "events": {},
+    "name": "text",
+    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
+    "extent": "parent",
+    "style": {
+      "width": "396px",
+      "height": "19px"
+    }
+  },
+  {
+    "id": "text_e9bde955_7c37_44d0_8c37_265ad44fdd9d",
+    "type": "text",
+    "dimensions": {
+      "width": 75,
+      "height": 19
+    },
+    "computedPosition": {
+      "x": 170.0787401574803,
+      "y": 302.3622047244094,
+      "z": 1
+    },
+    "handleBounds": {
+      "source": null,
+      "target": null
+    },
+    "selected": false,
+    "dragging": false,
+    "resizing": false,
+    "initialized": false,
+    "isParent": false,
+    "position": {
+      "x": 170.0787401574803,
+      "y": 302.3622047244094
+    },
+    "data": {
+      "options": {
+        "field": "deviceName",
+        "default": "",
+        "border": [
+          {
+            "type": "top",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "right",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "bottom",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          },
+          {
+            "type": "left",
+            "isShow": false,
+            "width": 1,
+            "color": "#000",
+            "borderType": "solid"
+          }
+        ]
+      },
+      "outputData": {}
+    },
+    "events": {},
+    "name": "text",
+    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
+    "extent": "parent",
+    "style": {
+      "width": "75px",
+      "height": "19px"
+    }
+  },
+  {
+    "id": "QRCode_94877b0d_0e26_4a8e_b159_8d99120725a0",
+    "type": "QRCode",
+    "dimensions": {
+      "width": 189,
+      "height": 189
+    },
+    "computedPosition": {
+      "x": 415.74803149606294,
+      "y": 264.56692913385825,
+      "z": 1001
+    },
+    "handleBounds": {
+      "source": null,
+      "target": null
+    },
+    "selected": true,
+    "dragging": false,
+    "resizing": false,
+    "initialized": false,
+    "isParent": false,
+    "position": {
+      "x": 415.74803149606294,
+      "y": 264.56692913385825
+    },
+    "data": {
+      "options": {
+        "default": "123123121"
+      },
+      "outputData": {}
+    },
+    "events": {},
+    "name": "QRCode",
+    "parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
+    "extent": "parent"
+  }
+]`;
+window.addEventListener('message', (event) => {
+  console.log('event', event);
+  if (isJSON(event.data)) {
+    let data = JSON.parse(event.data);
+    if (data.type === 'print') {
+      printFun();
+    }
+    if (data.type === 'setData') {
+      if (typeof data.value === 'object' && data.value !== null && !Array.isArray(data.value)) {
+        pageDatas.value = [data.value];
+      }
+      if (Array.isArray(data.value)) {
+        pageDatas.value = data.value;
+      }
+    }
+    if (data.type === 'setTemplate') {
+      nodes.value = JSON.parse(printNode || '[]');
+    }
+  }
+});
+onMounted(() => {
+  // nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
+  const param = route.query.data;
+  if (isJSON(param)) {
+    let data = JSON.parse(param);
+    if (Array.isArray(data)) {
+
+    }
+    // if()
+  }
+});
+
+const printInfoObj = {
+  id: 'printInfo',
+  preview: false,  // 是否开启预览
+  beforeOpenCallback(vue) {
+    console.log('触发打印工具打开前回调');
+  },
+  openCallback(vue) {
+    console.log('触发打印工具打开的回调');
+  },
+  closeCallback() {
+    console.log('触发关闭打印工具回调');
+  },
+  previewBeforeOpenCallback() {
+    console.log('触发预览前回调');
+  },
+  previewOpenCallback() {
+    console.log('触发预览的回调');
+  }
+};
+const switchPrinter = (e) => {
+  console.log(e);
+  printType.value = e;
+};
+const printFun = (e) => {
+  if (printType.value === -1) {
+    isPrint.value = true;
+    nextTick(() => {
+      const element = printRef.value;
+      let eles = element.querySelectorAll('.content');
+      const pros = [];
+
+      eles.forEach((ele, index) => {
+        pros.push(
+          html2canvas(ele).then(canvas => {
+            const imgData = canvas.toDataURL('image/png');
+            const pdf = new jsPDF();
+            pdf.addImage(imgData, 'PNG', 0, 0);
+            pdf.save(`${new Date().getTime()}-${index}.pdf`);
+          })
+        );
+      });
+      Promise.all(pros).then((values) => {
+        isPrint.value = false;
+      });
+    });
+  } else if (printType.value === 0) {
+    isPrint.value = true;
+    printPngList.value = [];
+    nextTick(() => {
+      const element = printRef.value;
+      let eles = element.querySelectorAll('.content');
+      const pros = [];
+
+      eles.forEach((ele, index) => {
+        pros.push(
+          html2canvas(ele).then(canvas => {
+            const imgData = canvas.toDataURL('image/png');
+            printPngList.value.push(imgData);
+          })
+        );
+      });
+      Promise.all(pros).then((values) => {
+        window.print();
+        isPrint.value = false;
+        printPngList.value = [];
+      });
+    });
+  } else {
+  }
+};
+const closePrint = () => {
+  isView.value = false;
+};
+const openPrint = (pages, templateId) => {
+  isView.value = false;
+  nextTick(() => {
+    nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
+    isView.value = true;
+    let pageData = [];
+    if (Array.isArray(pages)) {
+      pageData = pages;
+    }
+    if (typeof pages !== 'object' || pages === null) {
+      pageData = [pages];
+    }
+    console.log(pageData);
+    pageDatas.value = pageData || [];
+  });
+};
+const printName = () => {
+  if (printType.value === -1) {
+    return '导出PDF';
+  } else if (printType.value === 0) {
+    return '本地打印';
+  } else {
+    let name = printers?.value?.find(e => e.id === printType?.value)?.name;
+    return name || '';
+  }
+};
+defineExpose({
+  openPrint
+  // closePrint
+});
+</script>
+<style scoped>
+.content {
+  position: relative;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  border: 1px solid #ccc;
+}
+
+.node {
+  position: absolute;
+}
+
+.left {
+  display: inline-block;
+  width: calc(100% - 200px);
+}
+
+.right {
+  vertical-align: top;
+  display: inline-block;
+  width: 200px;
+}
+</style>
+<style>
+.print-page {
+  page-break-after: always;
+  text-align: center;
+  padding: 20px;
+  background: white;
+}
+
+.print-image {
+  max-width: 100%;
+  height: auto;
+}
+
+/* 打印样式：仅显示图片区域 */
+@media print {
+  body * {
+    visibility: hidden !important;
+  }
+
+  #printArea,
+  #printArea * {
+    visibility: visible !important;
+  }
+
+  #printArea {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  .print-page {
+    page-break-after: always;
+  }
+}
+</style>