center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

pref(仪表板): 优化导出图片组件，解决导卡顿，图片渲染不全和全屏状态下视图图片导出位置偏移或空白问题 #8005

Browse Source
This commit is contained in:
wangjiahao 2024-02-22 18:03:25 +08:00
parent 25e2e4afb8
commit 50b7939288
4 changed files with 51 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/backend/src/main/java/io/dataease/service/panel/PanelAppTemplateService.java
View File

@ -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);

2
core/backend/src/main/java/io/dataease/service/panel/PanelTemplateService.java
View File

@ -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);
}

39
core/frontend/src/utils/CanvasUtils.js
View File

@ -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)
}
}
}

65
core/frontend/src/views/panel/list/PanelViewShow.vue
View File

@ -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 => {
toPngUrl(canvasID, (pngUrl) => {
try {
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))
const a = document.createElement('a')
a.setAttribute('download', this.$store.state.panel.panelInfo.name + '.png')
a.href = pngUrl
document.body.appendChild(a)
a.click()
URL.revokeObjectURL(blob)
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,14 +755,17 @@ export default {
setTimeout(() => {
this.exporting = this.changeExportingState()
setTimeout(() => {
html2canvas(document.getElementById(this.canvasInfoTemp)).then(canvas => {
const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量
toPngUrl(document.getElementById(this.canvasInfoTemp), (pngUrl) => {
try {
this.dataLoading = false
this.exporting = false
if (snapshot !== '') {
this.snapshotInfo = snapshot
if (pngUrl !== '') {
this.snapshotInfo = pngUrl
this.pdfExportShow = true
}
} catch (e) {
window.devicePixelRatio = originalDPR
}
})
}, 1500)
window.devicePixelRatio = originalDPR
@ -777,16 +773,19 @@ export default {
},
refreshTemplateInfo() {
this.templateInfo = {}
html2canvas(document.getElementById(this.canvasInfoTemp)).then(canvas => {
const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.2是图片质量
if (snapshot !== '') {
toPngUrl(document.getElementById(this.canvasInfoTemp), (pngUrl) => {
try {
if (pngUrl !== '') {
this.templateInfo = {
snapshot: snapshot,
snapshot: pngUrl,
panelStyle: JSON.stringify(this.canvasStyleData),
panelData: JSON.stringify(this.componentData),
dynamicData: ''
}
}
} catch (e) {
console.log('toPngUrl error')
}
})
},
closeSaveDialog() {