修改打印配置

src/views/print/index.vue

@@ -254,16 +254,17 @@ const logEvent = async (eventname, event) => {
       break;
   }
 };
-const nodes = ref([{
+// const nodes = ref([{
-  id: pid.value,
+//   id: pid.value,
-  name: 'area',
+//   name: 'area',
-  type: 'area',
+//   type: 'area',
-  position: {
+//   position: {
-    x: 0,
+//     x: 0,
-    y: 0
+//     y: 0
-  },
+//   },
-  data: {}
+//   data: {}
-}]);
+// }]);
+const nodes = ref([]);
 const edges = ref([]);
 
 const setPage = (type, width, height) => {
@@ -308,6 +309,9 @@ onMounted(() => {
       zoom: 1
     });
   });
+  nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
+  pid.value = nodes.value.find(e => e.name === 'area')?.id;
+  console.log(nodes.value);
 });
 watch(() => flowRef.value?.viewport, () => {
   if (flowRef.value && (flowRef.value.viewport.x !== 0 || flowRef.value.viewport.y !== 0)) {

src/views/print/view.vue

@@ -3,7 +3,7 @@
   <el-dialog v-model="isView" title="预览" :close-on-press-escape="false" :show-close="false">
     <div id="printInfo" ref="printRef">
       <div class="content" v-for=" pageData in pageDatas"
-           :style="{width: cmToPx(pageWidth)+'px',height: cmToPx(pageHeight)+'px',marginBottom:'4px'}">
+           :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"
@@ -36,12 +36,32 @@
     </div>
     <template #footer>
       <span class="dialog-footer">
-        <el-button type="primary" @click="printFun">打印</el-button>
+
+    <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>
+        <!--        <el-button type="primary" @click="printFun">打印</el-button>-->
         <!--        <el-button type="primary" v-print="printInfoObj">打印</el-button>-->
         <el-button @click="closePrint">关闭</el-button>
       </span>
     </template>
   </el-dialog>
+  <div id="printArea">
+    <div
+      v-for="(url, index) in printPngList"
+      :key="index"
+      class="print-page"
+    >
+      <img :src="url" class="print-image" />
+    </div>
+  </div>
 </template>
 <script setup>
 
@@ -55,7 +75,22 @@ import QRCodeNode from './nodes/QRCodeNode.vue';
 import TimeNode from './nodes/timeNode.vue';
 import SelectNode from './nodes/selectNode.vue';
 
-
+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(false);
 
 const isPrint = ref(false);
@@ -66,7 +101,7 @@ const pageDatas = ref([{}]);
 const { cmToPx } = options;
 const nodes = ref([]);
 onMounted(() => {
-  nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]'); 
+  nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
 });
 
 const printInfoObj = {
@@ -88,28 +123,55 @@ const printInfoObj = {
     console.log('触发预览的回调');
   }
 };
-const printFun = () => {
+const switchPrinter = (e) => {
-  isPrint.value = true;
+  console.log(e);
-  nextTick(() => {
+  printType.value = e;
-    const element = printRef.value;
+};
-    let eles = element.querySelectorAll('.content');
+const printFun = (e) => {
-    const pros = [];
+  if (printType.value === -1) {
+    isPrint.value = true;
+    nextTick(() => {
+      const element = printRef.value;
+      let eles = element.querySelectorAll('.content');
+      const pros = [];
 
-    eles.forEach((ele, index) => {
+      eles.forEach((ele, index) => {
-      pros.push(
+        pros.push(
-        html2canvas(ele).then(canvas => {
+          html2canvas(ele).then(canvas => {
-          const imgData = canvas.toDataURL('image/png');
+            const imgData = canvas.toDataURL('image/png');
-          const pdf = new jsPDF();
+            const pdf = new jsPDF();
-          pdf.addImage(imgData, 'PNG', 0, 0);
+            pdf.addImage(imgData, 'PNG', 0, 0);
-          pdf.save(`${new Date().getTime()}-${index}.pdf`);
+            pdf.save(`${new Date().getTime()}-${index}.pdf`);
-        })
+          })
-      );
+        );
+      });
+      Promise.all(pros).then((values) => {
+        isPrint.value = false;
+      });
     });
-    Promise.all(pros).then((values) => {
+  } else if (printType.value === 0) {
-      console.log('PDF');
+    isPrint.value = true;
-      isPrint.value = false;
+    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;
+      });
     });
-  });
+  } else {
+  }
 };
 const closePrint = () => {
   isView.value = false;
@@ -130,6 +192,16 @@ const openPrint = (pages, templateId) => {
     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
@@ -147,4 +219,41 @@ defineExpose({
 .node {
   position: absolute;
 }
+
+</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>