From 424894ceb82b6315b87204d33745852223d5a976 Mon Sep 17 00:00:00 2001 From: jeo young <1414294708@qq.com> Date: Wed, 8 Feb 2023 21:07:09 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=88=AA=E5=9B=BE?= =?UTF-8?q?=E6=97=B6=E5=80=99=E7=94=BB=E5=B8=83=E9=9C=80=E8=A6=81=E9=87=8D?= =?UTF-8?q?=E7=BD=AE=E5=88=B0100%=E6=89=8D=E8=83=BD=E6=88=AA=E5=9B=BE?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 18 ++++------ src/utils/utils.ts | 33 +++++++++++++++---- .../components/EditTools/utils/index.ts | 6 ++-- 4 files changed, 38 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 046ab291..24540f99 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b57b0e70..5af5d6fb 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 34161e04..05235813 100644 --- a/src/utils/utils.ts +++ b/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 = ( 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, { - backgroundColor: null, - allowTaint: true, - useCORS: true - }).then((canvas: HTMLCanvasElement) => { + domtoimage.toPng(html, { + style: { left: 0, top: 0, transform: 'scale(1) translate(0,0)', marginLeft: 0, marginTop: 0 } + }).then((dataUrl: string) => { window['$message'].success('导出成功！') - downloadByA(canvas.toDataURL(), undefined, 'png') + downloadByA(dataUrl, undefined, 'png') if (callback) callback() }) } diff --git a/src/views/chart/ContentEdit/components/EditTools/utils/index.ts b/src/views/chart/ContentEdit/components/EditTools/utils/index.ts index 39e7af13..9945fcbf 100644 --- a/src/views/chart/ContentEdit/components/EditTools/utils/index.ts +++ b/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) }