二维码下载

package.json

@@ -56,9 +56,11 @@
     "echarts": "^5.4.3",
     "element-plus": "^2.3.4",
     "font-awesome": "^4.7.0",
+    "html2canvas": "^1.4.1",
     "jquery": "^3.7.1",
     "js-beautify": "^1.14.8",
     "js-md5": "^0.7.3",
+    "jszip": "^3.10.1",
     "mapv-three": "^1.0.18",
     "md5": "^2.3.0",
     "nprogress": "^0.2.0",

src/components/DesignForm/tableListPage/index.vue

@@ -31,6 +31,8 @@ import type { FormInstance, FormRules, ElNotification } from "element-plus";
 import { gainFormPageListCont } from "@/api/DesignForm/requestapi";
 import { Picture, InfoFilled, QuestionFilled } from "@element-plus/icons-vue";
 import request from "@/utils/request";
+import html2canvas from 'html2canvas';
+import JSZip from 'jszip';
 import { softDeletion, retractRunWorkFlow } from "@/api/taskapi/management";
 
 import { formatNumber } from "@/api/DesignForm/utils";
@@ -214,7 +216,7 @@ const resetFields = (formEl: FormInstance | undefined) => {
 };
 const qrCodesPrintDialogFlag = ref(false)
 
-const qrCodesPrintDialogData = ref({})
+const tablesData = ref({})
 function getDetailQrCodes(val:any) {
   return request({
     url: "/javasys/lowCode/QrCode/getDetailQrCodes",
@@ -242,6 +244,42 @@ function modifyFieldsMap4(fieldsMap: any): Array<{ key: string, value: string }>
     return result;
 }
 
+const tableRefs = reactive({});
+
+async function downloadTables() {
+  const zip = new JSZip();
+  
+  for (const [tableKey, element] of Object.entries(tableRefs)) {
+    try {
+      const canvas = await html2canvas(element);
+      const dataUrl = canvas.toDataURL('image/png');
+      const byteString = atob(dataUrl.split(',')[1]);
+      const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0];
+      const ab = new ArrayBuffer(byteString.length);
+      const ia = new Uint8Array(ab);
+      
+      for (let i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+      }
+
+      const blob = new Blob([ab], { type: mimeString });
+      zip.file(`${tableKey}.png`, blob);
+    } catch (error) {
+      console.error(`Error converting ${tableKey} to image:`, error);
+    }
+  }
+
+  zip.generateAsync({ type: 'blob' }).then(function(content) {
+    const now = new Date();
+    const formattedDate = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}_${String(now.getHours()).padStart(2, '0')}${String(now.getMinutes()).padStart(2, '0')}${String(now.getSeconds()).padStart(2, '0')}`;
+    const fileName = `tables_${formattedDate}.zip`;
+    
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(content);
+    link.download = fileName;
+    link.click();
+  });
+}
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-01 11:36:07
@@ -275,7 +313,7 @@ const setUpClick = (val: string, id: string) => {
             }
             
         }
-          qrCodesPrintDialogData.value = data
+        tablesData.value = data
           //console.log(qrCodesPrintDialogData.value)
           qrCodesPrintDialogFlag.value = true
         }else if(props.formBasicConfig.qrCodePrintStyle&&props.formBasicConfig.qrCodePrintStyle=="1"){
@@ -1586,14 +1624,20 @@ const diGuiJilian = (val: any, options: any[]) => {
     :close-on-click-modal="false"
     title="生成的二维码"
     :show-close="false"
-      style="margin-top: 70px"
+    style="margin-top: 10px"
     width="50%"
   >
-    <div style="min-height: 50px; max-height: 500px; overflow-y: auto">
+    <div v-if="formBasicConfig.qrCodePrintStyle == '2'" style="min-height: 50px; max-height: 750px; overflow-y: auto">
-      <div :id="index" v-for="(tableData, index) in qrCodesPrintDialogData"  :key="index" style="margin-bottom: 30px; width: 95%;">
+      <div 
-        <table >
+        v-for="(tableData, tableKey) in tablesData" 
+        :id="tableKey" 
+        :key="tableKey" 
+        :ref="(el: any) => { if (el) tableRefs[tableKey] = el }" 
+        style="margin-bottom: 30px; width: 95%;"
+      >
+        <table>
           <tr>
-              <th style="font-weight: bold; font-size:medium;" colspan="2">{{tableData.groupName}}-{{qrCodesPrintDialogData[index].appName}}-{{qrCodesPrintDialogData[index].formName}}-{{ index }}</th>
+            <th style="font-weight: bold; font-size:medium;" colspan="2">{{ tableData.groupName }}-{{ tablesData[tableKey].appName }}-{{ tablesData[tableKey].formName }}-{{ tableKey }}</th>
             <th rowspan="6"><img :src="tableData.bufferedImage" alt="二维码" width="auto" height="100%"></th>
           </tr>
           <tr v-for="(item, fIndex) in tableData.fieldsMap" :key="fIndex">
@@ -1605,7 +1649,7 @@ const diGuiJilian = (val: any, options: any[]) => {
     </div>
     <template #footer>
       <div class="dialog-footer">
-          <el-button  plain>下载</el-button>
+        <el-button type="primary" plain @click="downloadTables">下载</el-button>
         <el-button type="primary" plain @click="qrCodesPrintDialogFlag = false">
           确定
         </el-button>