修改看版配置

package.json

@@ -39,11 +39,13 @@
     "file-saver": "2.0.5",
     "fuse.js": "7.0.0",
     "highlight.js": "11.9.0",
+    "html2canvas": "^1.4.1",
     "image-conversion": "^2.1.1",
     "js-beautify": "1.14.11",
     "js-cookie": "3.0.5",
     "jsbarcode": "^3.11.6",
     "jsencrypt": "3.3.2",
+    "jspdf": "^3.0.1",
     "nprogress": "0.2.0",
     "pinia": "2.1.7",
     "qrcode": "^1.5.4",

src/views/print/index.vue

@@ -98,18 +98,22 @@
     </div>
   </div>
   <el-dialog v-model="isView" title="预览">
-    <div id="printInfo" v-if="isView">
+    <div id="printInfo" v-if="isView" ref="printRef">
       <View />
     </div>
     <template #footer>
       <span class="dialog-footer">
-        <el-button type="primary" v-print="printInfoObj">打印</el-button>
+        <el-button type="primary" @click="printFun">打印</el-button>
+        <!--        <el-button type="primary" v-print="printInfoObj">打印</el-button>-->
         <el-button @click="isView = false">关闭</el-button>
       </span>
     </template>
   </el-dialog>
 </template>
 <script setup lang="ts">
+
+import html2canvas from 'html2canvas';
+import jsPDF from 'jspdf';
 import { v4 as uuidv4 } from 'uuid';
 import { useRouter } from 'vue-router';
 import { VueFlow, useVueFlow } from '@vue-flow/core';
@@ -129,6 +133,7 @@ const router = useRouter();
 const { onDragStart, onDrop, onDragOver } = tool();
 const { cmToPx } = options;
 
+const printRef = ref();
 const isView = ref(false);
 const flowRef = ref();
 const isSnapToGrid = ref(true);
@@ -254,7 +259,15 @@ const printInfoObj = {
     console.log('触发预览的回调');
   }
 };
-
+const printFun = () => {
+  const element = printRef.value;
+  html2canvas(element).then(canvas => {
+    const imgData = canvas.toDataURL('image/png');
+    const pdf = new jsPDF();
+    pdf.addImage(imgData, 'PNG', 0, 0);
+    pdf.save(`${new Date().getTime()}.pdf`);
+  });
+};
 </script>
 <style lang="less" scoped>
 :deep(.vue-flow__node-area) {