Merge pull request #9789 from dataease/pr@dev-v2@refactor_screencut

refactor(仪表板): 优化截图组件，修复查询组件截图可能不全问题 #9641

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

@@ -6,6 +6,7 @@ import { storeToRefs } from 'pinia'
 import { findResourceAsBase64 } from '@/api/staticResource'
 import FileSaver from 'file-saver'
 import { deepCopy } from '@/utils/utils'
+import { toPng } from 'html-to-image'
 const embeddedStore = useEmbedded()
 const dvMainStore = dvMainStoreWithOut()
 const { canvasStyleData, componentData, canvasViewInfo, canvasViewDataInfo, dvInfo } =
@@ -70,6 +71,35 @@ export function download2AppTemplate(downloadType, canvasDom, name, callBack?) {
   }
 }
 
+export function downloadCanvas2(type, canvasDom, name, callBack?) {
+  toPng(canvasDom)
+    .then(dataUrl => {
+      const a = document.createElement('a')
+      a.setAttribute('download', name)
+      a.href = dataUrl
+      if (type === 'img') {
+        const a = document.createElement('a')
+        a.setAttribute('download', name)
+        a.href = dataUrl
+        a.click()
+        document.body.removeChild(a)
+      } else {
+        const contentWidth = canvasDom.offsetWidth
+        const contentHeight = canvasDom.offsetHeight
+        const lp = contentWidth > contentHeight ? 'l' : 'p'
+        const PDF = new JsPDF(lp, 'pt', [contentWidth, contentHeight])
+        PDF.addImage(dataUrl, 'PNG', 0, 0, contentWidth, contentHeight)
+        PDF.save(name + '.pdf')
+      }
+      if (callBack) {
+        callBack()
+      }
+    })
+    .catch(error => {
+      console.error('oops, something went wrong!', error)
+    })
+}
+
 export function downloadCanvas(type, canvasDom, name, callBack?) {
   // const canvasDom = document.getElementById(canvasId)
   if (canvasDom) {

core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue

@@ -12,7 +12,7 @@ import { useRequestStoreWithOut } from '@/store/modules/request'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import { useMoveLine } from '@/hooks/web/useMoveLine'
 import { Icon } from '@/components/icon-custom'
-import { download2AppTemplate, downloadCanvas } from '@/utils/imgUtils'
+import { download2AppTemplate, downloadCanvas, downloadCanvas2 } from '@/utils/imgUtils'
 
 const dvMainStore = dvMainStoreWithOut()
 const previewCanvasContainer = ref(null)
@@ -98,7 +98,7 @@ const downloadH2 = type => {
   downloadStatus.value = true
   nextTick(() => {
     const vueDom = previewCanvasContainer.value.querySelector('.canvas-container')
-    downloadCanvas(type, vueDom, state.dvInfo.name, () => {
+    downloadCanvas2(type, vueDom, state.dvInfo.name, () => {
       downloadStatus.value = false
     })
   })

core/core-frontend/src/views/data-visualization/PreviewShow.vue

@@ -13,7 +13,7 @@ import { useRequestStoreWithOut } from '@/store/modules/request'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import { useMoveLine } from '@/hooks/web/useMoveLine'
 import { Icon } from '@/components/icon-custom'
-import { download2AppTemplate, downloadCanvas } from '@/utils/imgUtils'
+import { download2AppTemplate, downloadCanvas, downloadCanvas2 } from '@/utils/imgUtils'
 
 const dvMainStore = dvMainStoreWithOut()
 const { dvInfo } = storeToRefs(dvMainStore)
@@ -86,7 +86,7 @@ const download = type => {
   downloadStatus.value = true
   setTimeout(() => {
     const vueDom = previewCanvasContainer.value.querySelector('.canvas-container')
-    downloadCanvas(type, vueDom, state.dvInfo.name, () => {
+    downloadCanvas2(type, vueDom, state.dvInfo.name, () => {
       downloadStatus.value = false
     })
   }, 200)