From cf9426706d5a2cf2bc244233cc177c1af3fd2c68 Mon Sep 17 00:00:00 2001 From: liwenxuan <1298531568@qq.com> Date: Fri, 17 Jan 2025 08:38:17 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E7=BB=B4=E7=A0=81=E4=B8=8B=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + .../DesignForm/tableListPage/index.vue | 98 ++++++++++++++----- 2 files changed, 73 insertions(+), 27 deletions(-) diff --git a/package.json b/package.json index 7dc2d75..87ba042 100644 --- a/package.json +++ b/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", diff --git a/src/components/DesignForm/tableListPage/index.vue b/src/components/DesignForm/tableListPage/index.vue index d6c5ecc..1bcec78 100644 --- a/src/components/DesignForm/tableListPage/index.vue +++ b/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"){ @@ -1580,38 +1618,44 @@ const diGuiJilian = (val: any, options: any[]) => { /> -
-
- + v-model="qrCodesPrintDialogFlag" + class="glxxsztc" + top="150px" + :close-on-click-modal="false" + title="生成的二维码" + :show-close="false" + style="margin-top: 10px" + width="50%" + > +
+
+
- - + + - - + +
{{tableData.groupName}}-{{qrCodesPrintDialogData[index].appName}}-{{qrCodesPrintDialogData[index].formName}}-{{ index }}二维码{{ tableData.groupName }}-{{ tablesData[tableKey].appName }}-{{ tablesData[tableKey].formName }}-{{ tableKey }}二维码
{{ item.key }}{{ item.value }}{{ item.key }}{{ item.value }}
- - + +