From 04e965b7aba5150ae9fb381e922eca2b988bdb7f Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Fri, 22 Apr 2022 12:01:19 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=86=E5=9B=BE=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E7=9B=B4=E6=8E=A5=E5=AF=BC=E5=87=BA=E5=9B=BE=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvas/components/Editor/Preview.vue | 16 +++++++--- .../canvas/components/Editor/index.vue | 16 +++++++--- .../custom-component/UserViewDialog.vue | 5 ++- frontend/src/components/canvas/utils/utils.js | 27 ++++++++++++++++ frontend/src/lang/en.js | 3 ++ frontend/src/lang/tw.js | 3 ++ frontend/src/lang/zh.js | 4 ++- frontend/src/styles/deicon/demo_index.html | 29 ++++++++++++++++-- frontend/src/styles/deicon/iconfont.css | 10 ++++-- frontend/src/styles/deicon/iconfont.js | 2 +- frontend/src/styles/deicon/iconfont.json | 7 +++++ frontend/src/styles/deicon/iconfont.ttf | Bin 23692 -> 24084 bytes frontend/src/styles/deicon/iconfont.woff | Bin 14764 -> 15032 bytes frontend/src/styles/deicon/iconfont.woff2 | Bin 12532 -> 12764 bytes 14 files changed, 105 insertions(+), 17 deletions(-) diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue index 5da0a077a3..61fc45c893 100644 --- a/frontend/src/components/canvas/components/Editor/Preview.vue +++ b/frontend/src/components/canvas/components/Editor/Preview.vue @@ -32,10 +32,15 @@ :destroy-on-close="true" > - - - {{ $t('chart.export_details') }} - + + + {{ $t('chart.export') }} + + + Excle + {{ $t('chart.image') }} + + @@ -326,6 +331,9 @@ export default { exportExcel() { this.$refs['userViewDialog'].exportExcel() }, + exportViewImg() { + this.$refs['userViewDialog'].exportViewImg() + }, deselectCurComponent(e) { if (!this.isClickComponent) { this.$store.commit('setCurComponent', { component: null, index: null }) diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue index d2e05831b5..0e340487aa 100644 --- a/frontend/src/components/canvas/components/Editor/index.vue +++ b/frontend/src/components/canvas/components/Editor/index.vue @@ -154,10 +154,15 @@ :show-close="true" > - - - {{ $t('chart.export_details') }} - + + + {{ $t('chart.export') }} + + + Excle + {{ $t('chart.image') }} + + item.name) const excelHeaderKeys = JSON.parse(JSON.stringify(this.chart.data.fields)).map(item => item.dataeaseName) diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js index 624e7a9515..860bf7861a 100644 --- a/frontend/src/components/canvas/utils/utils.js +++ b/frontend/src/components/canvas/utils/utils.js @@ -9,6 +9,7 @@ import { import { uuid } from 'vue-uuid' import store from '@/store' import { AIDED_DESIGN } from '@/views/panel/panel' +import html2canvas from 'html2canvasde' export function deepCopy(target) { if (typeof target === 'object') { @@ -156,3 +157,29 @@ export function checkViewTitle(opt, id, tile) { } } +export function exportImg(imgName) { + const canvasID = document.getElementById('chartCanvas') + const a = document.createElement('a') + html2canvas(canvasID).then(canvas => { + 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)) + a.setAttribute('download', imgName + '.png') + document.body.appendChild(a) + a.click() + URL.revokeObjectURL(blob) + document.body.removeChild(a) + }) +} + +export function dataURLToBlob(dataurl) { // ie 图片转格式 + const arr = dataurl.split(','); const mime = arr[0].match(/:(.*?);/)[1] + const bstr = atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n) + while (n--) { + u8arr[n] = bstr.charCodeAt(n) + } + return new Blob([u8arr], { type: mime }) +} diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 1b908c0752..d57a3442f1 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -903,7 +903,10 @@ export default { filter_in: 'IN', filter_not_in: 'NOT IN', chart_details: 'Chart Details', + details: 'Details', + image: 'Image', export_details: 'Export Details', + export: 'Export', color_light: 'Light', color_classical: 'Classical', color_fresh: 'Fresh', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 420d0effdd..ad7bfb75fa 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -911,7 +911,10 @@ export default { color_fast: '輕快', color_spiritual: '靈動', chart_details: '視圖明細', + details: '明细', + image: '图片', export_details: '導出明細', + export: '导出', chart_data: '數據', chart_style: '樣式', drag_block_type_axis: '類別軸', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 759e36a20c..d64157aab0 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -913,7 +913,9 @@ export default { color_fast: '轻快', color_spiritual: '灵动', chart_details: '视图明细', - export_details: '导出明细', + export: '导出', + details: '明细', + image: '图片', chart_data: '数据', chart_style: '样式', drag_block_type_axis: '类别轴', diff --git a/frontend/src/styles/deicon/demo_index.html b/frontend/src/styles/deicon/demo_index.html index de8d8ba6f3..a8e8256837 100644 --- a/frontend/src/styles/deicon/demo_index.html +++ b/frontend/src/styles/deicon/demo_index.html @@ -54,6 +54,12 @@
    +
  • + +
    图片
    +
    &#xe666;
    +
    • +
  • 超链接
    @@ -558,9 +564,9 @@ 
    @font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1650358178587') format('woff2'),
-       url('iconfont.woff?t=1650358178587') format('woff'),
-       url('iconfont.ttf?t=1650358178587') format('truetype');
+  src: url('iconfont.woff2?t=1650596962167') format('woff2'),
+       url('iconfont.woff?t=1650596962167') format('woff'),
+       url('iconfont.ttf?t=1650596962167') format('truetype');
 }

    第二步：定义使用 iconfont 的样式

    @@ -586,6 +592,15 @@
      +
    • + +
      + 图片 +
      +
      .icon-tupian +
      +
      • +
    • @@ -1342,6 +1357,14 @@
        +
      • + +
        图片
        +
        #icon-tupian
        +
        • +