Pre Merge pull request !128 from jeo_young/dev

package.json

@@ -25,6 +25,7 @@
     "color": "^4.2.3",
     "crypto-js": "^4.1.1",
     "dom-helpers": "^5.2.1",
+    "dom-to-image": "^2.6.0",
     "echarts-liquidfill": "^3.1.0",
     "echarts-stat": "^1.2.0",
     "echarts-wordcloud": "^2.0.0",

pnpm-lock.yaml

@@ -26,6 +26,7 @@ specifiers:
   crypto-js: ^4.1.1
   default-passive-events: ^2.0.0
   dom-helpers: ^5.2.1
+  dom-to-image: ^2.6.0
   echarts: ^5.3.2
   echarts-liquidfill: ^3.1.0
   echarts-stat: ^1.2.0
@@ -79,6 +80,7 @@ dependencies:
   color: 4.2.3
   crypto-js: 4.1.1
   dom-helpers: 5.2.1
+  dom-to-image: 2.6.0
   echarts-liquidfill: 3.1.0_echarts@5.3.3
   echarts-stat: 1.2.0
   echarts-wordcloud: 2.0.0_echarts@5.3.3
@@ -1237,7 +1239,6 @@ packages:
     dependencies:
       '@vue/reactivity': 3.2.37
       '@vue/shared': 3.2.37
-    dev: false
 
   /@vue/runtime-dom/3.2.37:
     resolution: {integrity: sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==}
@@ -1245,7 +1246,6 @@ packages:
       '@vue/runtime-core': 3.2.37
       '@vue/shared': 3.2.37
       csstype: 2.6.20
-    dev: false
 
   /@vue/server-renderer/3.2.37_vue@3.2.37:
     resolution: {integrity: sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==}
@@ -1255,7 +1255,6 @@ packages:
       '@vue/compiler-ssr': 3.2.37
       '@vue/shared': 3.2.37
       vue: 3.2.37
-    dev: false
 
   /@vue/shared/3.2.37:
     resolution: {integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==}
@@ -1832,8 +1831,8 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
-      is-text-path: 1.0.1
       JSONStream: 1.3.5
+      is-text-path: 1.0.1
       lodash: 4.17.21
       meow: 8.1.2
       split2: 3.2.2
@@ -1912,7 +1911,6 @@ packages:
 
   /csstype/2.6.20:
     resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
-    dev: false
 
   /csstype/3.0.11:
     resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==}
@@ -2079,6 +2077,10 @@ packages:
       entities: 2.2.0
     dev: true
 
+  /dom-to-image/2.6.0:
+    resolution: {integrity: sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA==}
+    dev: false
+
   /domelementtype/2.3.0:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
     dev: true
@@ -2137,7 +2139,6 @@ packages:
     dependencies:
       tslib: 2.3.0
       zrender: 5.3.2
-    dev: true
 
   /ee-first/1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
@@ -3818,7 +3819,6 @@ packages:
 
   /monaco-editor/0.33.0:
     resolution: {integrity: sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw==}
-    dev: false
 
   /ms/2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
@@ -4965,7 +4965,6 @@ packages:
 
   /tslib/2.3.0:
     resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
-    dev: true
 
   /tslib/2.4.0:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
@@ -5017,7 +5016,6 @@ packages:
     resolution: {integrity: sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==}
     engines: {node: '>=4.2.0'}
     hasBin: true
-    dev: true
 
   /typescript/4.7.3:
     resolution: {integrity: sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==}
@@ -5437,7 +5435,6 @@ packages:
       '@vue/runtime-dom': 3.2.37
       '@vue/server-renderer': 3.2.37_vue@3.2.37
       '@vue/shared': 3.2.37
-    dev: false
 
   /vue3-lazyload/0.2.5-beta_2yymnzrok6eda47acnj2yjm3ae:
     resolution: {integrity: sha512-GVhJfL9Hcu+AvWsYmUwODivvt+gzpT0ztgAzZaUduoiTaGCv/qzhr0VwAQXfjGF3XFYFyOJsHlAi3/WE0P8XTQ==}
@@ -5603,4 +5600,3 @@ packages:
     resolution: {integrity: sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==}
     dependencies:
       tslib: 2.3.0
-    dev: true

src/utils/utils.ts

@@ -4,6 +4,7 @@ import screenfull from 'screenfull'
 import throttle from 'lodash/throttle'
 import Image_404 from '../assets/images/exception/image-404.png'
 import html2canvas from 'html2canvas'
+import domtoimage from 'dom-to-image'
 import { downloadByA } from './file'
 import { toString } from './type'
 import cloneDeep from 'lodash/cloneDeep'
@@ -173,6 +174,28 @@ export const removeEventListener = <K extends keyof WindowEventMap>(
   target.removeEventListener(type, listener)
 }
 
+/**
+ * * 截取画面为图片并下载
+ * @param html 需要截取的 DOM
+ */
+// export const canvasCut = (html: HTMLElement | null, callback?: Function) => {
+//   if (!html) {
+//     window['$message'].error('导出失败！')
+//     if (callback) callback()
+//     return
+//   }
+
+//   html2canvas(html, {
+//     backgroundColor: null,
+//     allowTaint: true,
+//     useCORS: true
+//   }).then((canvas: HTMLCanvasElement) => {
+//     window['$message'].success('导出成功！')
+//     downloadByA(canvas.toDataURL(), undefined, 'png')
+//     if (callback) callback()
+//   })
+// }
+
 /**
  * * 截取画面为图片并下载
  * @param html 需要截取的 DOM
@@ -184,13 +207,11 @@ export const canvasCut = (html: HTMLElement | null, callback?: Function) => {
     return
   }
 
-  html2canvas(html, {
+  domtoimage.toPng(html, {
-    backgroundColor: null,
+    style: { left: 0, top: 0, transform: 'scale(1) translate(0,0)', marginLeft: 0, marginTop: 0 }
-    allowTaint: true,
+  }).then((dataUrl: string) => {
-    useCORS: true
-  }).then((canvas: HTMLCanvasElement) => {
     window['$message'].success('导出成功！')
-    downloadByA(canvas.toDataURL(), undefined, 'png')
+    downloadByA(dataUrl, undefined, 'png')
     if (callback) callback()
   })
 }

src/views/chart/ContentEdit/components/EditTools/utils/index.ts

@@ -24,9 +24,9 @@ export const exportHandle = () => {
   }
 
   // 记录缩放比例
-  const scaleTemp = chartEditStore.getEditCanvas.scale
+  // const scaleTemp = chartEditStore.getEditCanvas.scale
   // 百分百展示页面
-  chartEditStore.setScale(1, true)
+  // chartEditStore.setScale(1, true)
   // 展示水印
   watermark.style.display = 'block'
 
@@ -35,7 +35,7 @@ export const exportHandle = () => {
       // 隐藏水印
       if (watermark) watermark.style.display = 'none'
       // 还原页面大小
-      chartEditStore.setScale(scaleTemp, true)
+      // chartEditStore.setScale(scaleTemp, true)
     })
   }, 600)
 }