refactor(数据大屏、仪表板): 更换图片导出组件优化图片导出逻辑 (#17438)

core/core-frontend/package.json

@@ -45,6 +45,7 @@
     "lodash-es": "^4.17.21",
     "mathjs": "^11.6.0",
     "mitt": "^3.0.0",
+    "modern-screenshot": "^4.6.6",
     "net": "^1.0.2",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
@@ -66,9 +67,9 @@
     "vue-uuid": "^3.0.0",
     "vue3-ace-editor": "^2.2.2",
     "vuedraggable": "^4.1.0",
+    "vxe-table": "^4.16.20",
     "web-storage-cache": "^1.1.1",
-    "xss": "^1.0.14",
-    "vxe-table": "^4.16.20"
+    "xss": "^1.0.14"
   },
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^0.8.2",

core/core-frontend/src/utils/imgUtils.ts

@@ -7,6 +7,7 @@ import { findResourceAsBase64 } from '@/api/staticResource'
 import FileSaver from 'file-saver'
 import { deepCopy } from '@/utils/utils'
 import { toPng } from 'html-to-image'
+import { domToPng } from 'modern-screenshot'
 const embeddedStore = useEmbedded()
 const dvMainStore = dvMainStoreWithOut()
 const { canvasStyleData, componentData, canvasViewInfo, canvasViewDataInfo, dvInfo } =
@@ -78,7 +79,7 @@ export function download2AppTemplate(downloadType, canvasDom, name, attachParams
   }
 }
 
-export function downloadCanvas2(type, canvasDom, name, callBack?) {
+export function downloadCanvas(type, canvasDom, name, callBack?) {
   // const canvasDom = document.getElementById(canvasId)
   if (canvasDom) {
     html2canvas(canvasDom)
@@ -115,8 +116,8 @@ export function downloadCanvas2(type, canvasDom, name, callBack?) {
   }
 }
 
-export function downloadCanvas(type, canvasDom, name, callBack?) {
-  toPng(canvasDom)
+export function downloadCanvas2(type, canvasDom, name, callBack?) {
+  domToPng(canvasDom)
     .then(dataUrl => {
       if (type === 'img') {
         const a = document.createElement('a')