From 50b793928826abae433d58d0aa4848d69746d155 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 22 Feb 2024 18:03:25 +0800 Subject: [PATCH] =?UTF-8?q?pref(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E5=AF=BC=E5=87=BA=E5=9B=BE=E7=89=87=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=EF=BC=8C=E8=A7=A3=E5=86=B3=E5=AF=BC=E5=8D=A1=E9=A1=BF=EF=BC=8C?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=B8=B2=E6=9F=93=E4=B8=8D=E5=85=A8=E5=92=8C?= =?UTF-8?q?=E5=85=A8=E5=B1=8F=E7=8A=B6=E6=80=81=E4=B8=8B=E8=A7=86=E5=9B=BE?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=AF=BC=E5=87=BA=E4=BD=8D=E7=BD=AE=E5=81=8F?= =?UTF-8?q?=E7=A7=BB=E6=88=96=E7=A9=BA=E7=99=BD=E9=97=AE=E9=A2=98=20#8005?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../panel/PanelAppTemplateService.java | 4 +- .../service/panel/PanelTemplateService.java | 2 +- core/frontend/src/utils/CanvasUtils.js | 39 -------- .../src/views/panel/list/PanelViewShow.vue | 97 +++++++++---------- 4 files changed, 51 insertions(+), 91 deletions(-) diff --git a/core/backend/src/main/java/io/dataease/service/panel/PanelAppTemplateService.java b/core/backend/src/main/java/io/dataease/service/panel/PanelAppTemplateService.java index 4d89a21889..002474ecdc 100644 --- a/core/backend/src/main/java/io/dataease/service/panel/PanelAppTemplateService.java +++ b/core/backend/src/main/java/io/dataease/service/panel/PanelAppTemplateService.java @@ -98,7 +98,7 @@ public class PanelAppTemplateService { if (StringUtils.isNotEmpty(request.getSnapshot())) { //Store static resource into the server String snapshotName = "app-template-" + request.getId() + ".jpeg"; - staticResourceService.saveSingleFileToServe(snapshotName, request.getSnapshot().replace("data:image/jpeg;base64,", "")); + staticResourceService.saveSingleFileToServe(snapshotName, request.getSnapshot().replace("data:image/jpeg;base64,", "").replace("data:image/png;base64,", "")); requestTemplate.setSnapshot("/" + UPLOAD_URL_PREFIX + '/' + snapshotName); } panelAppTemplateMapper.insertSelective(requestTemplate); @@ -114,7 +114,7 @@ public class PanelAppTemplateService { //Store static resource into the server if (StringUtils.isNotEmpty(request.getSnapshot()) && request.getSnapshot().indexOf("static-resource") == -1) { String snapshotName = "app-template-" + UUIDUtil.getUUIDAsString() + ".jpeg"; - staticResourceService.saveSingleFileToServe(snapshotName, request.getSnapshot().replace("data:image/jpeg;base64,", "")); + staticResourceService.saveSingleFileToServe(snapshotName, request.getSnapshot().replace("data:image/jpeg;base64,", "").replace("data:image/png;base64,", "")); requestTemplate.setSnapshot("/" + UPLOAD_URL_PREFIX + '/' + snapshotName); } panelAppTemplateMapper.updateByPrimaryKeySelective(requestTemplate); diff --git a/core/backend/src/main/java/io/dataease/service/panel/PanelTemplateService.java b/core/backend/src/main/java/io/dataease/service/panel/PanelTemplateService.java index 18326418a7..6bdc8de3b4 100644 --- a/core/backend/src/main/java/io/dataease/service/panel/PanelTemplateService.java +++ b/core/backend/src/main/java/io/dataease/service/panel/PanelTemplateService.java @@ -84,7 +84,7 @@ public class PanelTemplateService { //Store static resource into the server staticResourceService.saveFilesToServe(request.getStaticResource()); String snapshotName = "template-" + request.getId() + ".jpeg"; - staticResourceService.saveSingleFileToServe(snapshotName, request.getSnapshot().replace("data:image/jpeg;base64,", "")); + staticResourceService.saveSingleFileToServe(snapshotName, request.getSnapshot().replace("data:image/jpeg;base64,", "").replace("data:image/png;base64,", "")); request.setSnapshot("/" + UPLOAD_URL_PREFIX + '/' + snapshotName); } diff --git a/core/frontend/src/utils/CanvasUtils.js b/core/frontend/src/utils/CanvasUtils.js index 02a0d8ac0d..b14adf03dc 100644 --- a/core/frontend/src/utils/CanvasUtils.js +++ b/core/frontend/src/utils/CanvasUtils.js @@ -1,5 +1,4 @@ import { toPng } from 'html-to-image' -import store from "@/store"; export function toPngUrl(refContainer, callBack) { toPng(refContainer) @@ -11,7 +10,6 @@ export function toPngUrl(refContainer, callBack) { }) } - export function dataURLToBlobCheck(dataurl) { // ie 图片转格式 const arr = dataurl.split(',') const mime = arr[0].match(/:(.*?);/)[1] @@ -37,40 +35,3 @@ export function imgUrlTransCheck(url) { return url } } - -export function getNowCanvasComponentDataCheck(canvasId, showPosition) { - if (showPosition && (showPosition.includes('email-task') || showPosition.includes('multiplexing'))) { - return store.state.previewComponentData.filter(item => item.canvasId === canvasId) - } else { - return store.state.componentData.filter(item => item.canvasId === canvasId) - } -} - -export function findCurComponentIndexCheck(componentData, curComponent) { - let curIndex = 0 - for (let index = 0; index < componentData.length; index++) { - const element = componentData[index] - if (element.id && element.id === curComponent.id) { - curIndex = index - break - } - } - return curIndex -} - -export function deleteTreeNodeCheck(nodeId, tree, nodeTarget) { - if (!nodeId || !tree || !tree.length) { - return - } - for (let i = 0, len = tree.length; i < len; i++) { - if (tree[i].id === nodeId) { - if (nodeTarget) { - nodeTarget['target'] = tree[i] - } - tree.splice(i, 1) - return - } else if (tree[i].children && tree[i].children.length) { - deleteTreeNode(nodeId, tree[i].children, nodeTarget) - } - } -} diff --git a/core/frontend/src/views/panel/list/PanelViewShow.vue b/core/frontend/src/views/panel/list/PanelViewShow.vue index 74d504d65d..608abe3518 100644 --- a/core/frontend/src/views/panel/list/PanelViewShow.vue +++ b/core/frontend/src/views/panel/list/PanelViewShow.vue @@ -393,7 +393,6 @@ import PDFPreExport from '@/views/panel/export/PDFPreExport' import Preview from '@/components/canvas/components/editor/Preview' import SaveToTemplate from '@/views/panel/list/SaveToTemplate' import { mapState } from 'vuex' -import html2canvas from 'html2canvasde' import FileSaver from 'file-saver' import JSZip from 'jszip' import { deleteEnshrine, saveEnshrine, starStatus } from '@/api/panel/enshrine' @@ -402,13 +401,14 @@ import { queryAll } from '@/api/panel/pdfTemplate' import ShareHead from '@/views/panel/grantAuth/shareHead' import { export2AppCheck, initPanelData, updatePanelStatus } from '@/api/panel/panel' import { proxyInitPanelData } from '@/api/panel/shareProxy' -import { dataURLToBlob, getNowCanvasComponentData } from '@/components/canvas/utils/utils' +import { getNowCanvasComponentData } from '@/components/canvas/utils/utils' import { findResourceAsBase64 } from '@/api/staticResource/staticResource' import PanelDetailInfo from '@/views/panel/list/common/PanelDetailInfo' import AppExportForm from '@/views/panel/list/AppExportForm' import GrantAuth from '../grantAuth' import msgCfm from '@/components/msgCfm/index' import { inOtherPlatform } from '@/utils/index' +import { toPngUrl } from '@/utils/CanvasUtils' export default { name: 'PanelViewShow', @@ -563,14 +563,13 @@ export default { saveToTemplate() { this.dataLoading = true setTimeout(() => { - html2canvas(document.getElementById(this.canvasInfoTemp)).then(canvas => { + toPngUrl(document.getElementById(this.canvasInfoTemp), (pngUrl) => { this.templateSaveShow = true this.dataLoading = false - const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.2是图片质量 - if (snapshot !== '') { + if (pngUrl !== '') { this.templateInfo = { name: this.$store.state.panel.panelInfo.name, - snapshot: snapshot, + snapshot: pngUrl, templateStyle: JSON.stringify(this.canvasStyleData), templateData: JSON.stringify(this.componentData), templateType: 'self', @@ -588,14 +587,13 @@ export default { _this.dataLoading = true try { _this.findStaticSource(function(staticResource) { - html2canvas(document.getElementById(_this.canvasInfoTemp)).then(canvas => { + toPngUrl(document.getElementById(_this.canvasInfoTemp), (pngUrl) => { _this.dataLoading = false - const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.1是图片质量 - if (snapshot !== '') { + if (pngUrl !== '') { _this.templateInfo = { name: _this.$store.state.panel.panelInfo.name, templateType: 'self', - snapshot: snapshot, + snapshot: pngUrl, panelStyle: JSON.stringify(_this.canvasStyleData), panelData: JSON.stringify(_this.componentData), dynamicData: JSON.stringify(_this.panelViewDetailsInfo), @@ -617,14 +615,13 @@ export default { try { const jsZip = new JSZip() _this.findStaticSource(function(staticResource) { - html2canvas(document.getElementById(_this.canvasInfoTemp)).then(canvas => { + toPngUrl(document.getElementById(_this.canvasInfoTemp), (pngUrl) => { _this.dataLoading = false - const snapshot = canvas.toDataURL('image/jpeg', 1) // 0.1是图片质量 - if (snapshot !== '') { + if (pngUrl !== '') { const panelInfo = { name: _this.$store.state.panel.panelInfo.name, id: _this.$store.state.panel.panelInfo.id, - snapshot: snapshot, + snapshot: pngUrl, panelStyle: JSON.stringify(_this.canvasStyleData), panelData: JSON.stringify(_this.componentData), dynamicData: JSON.stringify(_this.panelViewDetailsInfo), @@ -728,32 +725,28 @@ export default { this.exporting = this.changeExportingState() setTimeout(() => { const canvasID = document.getElementById(this.canvasInfoTemp) - const a = document.createElement('a') - html2canvas(canvasID).then(canvas => { - this.exporting = false - const dom = document.body.appendChild(canvas) - dom.style.display = 'none' - a.style.display = 'none' - document.body.removeChild(dom) - const blob = dataURLToBlob(dom.toDataURL('image/png', 1)) - a.setAttribute('href', URL.createObjectURL(blob)) - a.setAttribute('download', this.$store.state.panel.panelInfo.name + '.png') - document.body.appendChild(a) - a.click() - URL.revokeObjectURL(blob) - document.body.removeChild(a) - window.devicePixelRatio = originalDPR - setTimeout(() => { - this.dataLoading = false - }, 300) + toPngUrl(canvasID, (pngUrl) => { + try { + this.exporting = false + const a = document.createElement('a') + a.setAttribute('download', this.$store.state.panel.panelInfo.name + '.png') + a.href = pngUrl + document.body.appendChild(a) + a.click() + document.body.removeChild(a) + window.devicePixelRatio = originalDPR + setTimeout(() => { + this.dataLoading = false + }, 300) + } catch (e) { + window.devicePixelRatio = originalDPR + } }) }, 1500) }, 500) }, downloadAsPDF() { - // this.pdfExportShow = true - // this.dataLoading = true // 保存原始的设备像素比值 const originalDPR = window.devicePixelRatio @@ -762,13 +755,16 @@ export default { setTimeout(() => { this.exporting = this.changeExportingState() setTimeout(() => { - html2canvas(document.getElementById(this.canvasInfoTemp)).then(canvas => { - const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量 - this.dataLoading = false - this.exporting = false - if (snapshot !== '') { - this.snapshotInfo = snapshot - this.pdfExportShow = true + toPngUrl(document.getElementById(this.canvasInfoTemp), (pngUrl) => { + try { + this.dataLoading = false + this.exporting = false + if (pngUrl !== '') { + this.snapshotInfo = pngUrl + this.pdfExportShow = true + } + } catch (e) { + window.devicePixelRatio = originalDPR } }) }, 1500) @@ -777,15 +773,18 @@ export default { }, refreshTemplateInfo() { this.templateInfo = {} - html2canvas(document.getElementById(this.canvasInfoTemp)).then(canvas => { - const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.2是图片质量 - if (snapshot !== '') { - this.templateInfo = { - snapshot: snapshot, - panelStyle: JSON.stringify(this.canvasStyleData), - panelData: JSON.stringify(this.componentData), - dynamicData: '' + toPngUrl(document.getElementById(this.canvasInfoTemp), (pngUrl) => { + try { + if (pngUrl !== '') { + this.templateInfo = { + snapshot: pngUrl, + panelStyle: JSON.stringify(this.canvasStyleData), + panelData: JSON.stringify(this.componentData), + dynamicData: '' + } } + } catch (e) { + console.log('toPngUrl error') } }) },