feat: 视图支持直接导出图片

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -32,10 +32,15 @@
           :destroy-on-close="true"
         >
           <span style="position: absolute;right: 70px;top:15px">
-            <el-button size="mini" @click="exportExcel">
+            <el-dropdown>
-              <svg-icon icon-class="ds-excel" class="ds-icon-excel" />
+              <el-button size="mini">
-              {{ $t('chart.export_details') }}
+                {{ $t('chart.export') }}<i class="el-icon-download" />
-            </el-button>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excle</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-picture-outline" @click.native="exportViewImg">{{ $t('chart.image') }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
           </span>
           <UserViewDialog v-if="chartDetailsVisible" ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
         </el-dialog>
@@ -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 })

frontend/src/components/canvas/components/Editor/index.vue

@@ -154,10 +154,15 @@
       :show-close="true"
     >
       <span style="position: absolute;right: 70px;top:15px">
-        <el-button size="mini" @click="exportExcel">
+        <el-dropdown>
-          <svg-icon icon-class="ds-excel" class="ds-icon-excel" />
+              <el-button size="mini">
-          {{ $t('chart.export_details') }}
+                {{ $t('chart.export') }}<i class="el-icon-download" />
-        </el-button>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excle</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-picture-outline" @click.native="exportViewImg">{{ $t('chart.image') }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
       </span>
       <UserViewDialog
         v-if="chartDetailsVisible"
@@ -1347,6 +1352,9 @@ export default {
     exportExcel() {
       this.$refs['userViewDialog'].exportExcel()
     },
+    exportViewImg() {
+      this.$refs['userViewDialog'].exportViewImg()
+    },
     showViewDetails(index) {
       this.$refs.wrapperChild[index].openChartDetailsDialog()
     },

frontend/src/components/canvas/custom-component/UserViewDialog.vue

@@ -40,7 +40,7 @@ import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
 import { exportDetails } from '@/api/panel/panel'
 import html2canvas from 'html2canvasde'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import { deepCopy } from '@/components/canvas/utils/utils'
+import { deepCopy, exportImg } from '@/components/canvas/utils/utils'
 export default {
   name: 'UserView',
   components: { LabelNormalText, ChartComponentS2, ChartComponentG2, DeMainContainer, DeContainer, DeAsideContainer, ChartComponent, TableNormal, LabelNormal, PluginCom },
@@ -138,6 +138,9 @@ export default {
         _this.exportExcelDownload()
       }
     },
+    exportViewImg() {
+      exportImg(this.chart.name)
+    },
     exportExcelDownload(snapshot, width, height) {
       const excelHeader = JSON.parse(JSON.stringify(this.chart.data.fields)).map(item => item.name)
       const excelHeaderKeys = JSON.parse(JSON.stringify(this.chart.data.fields)).map(item => item.dataeaseName)

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 })
+}

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',

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: '類別軸',

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: '类别轴',

frontend/src/styles/deicon/demo_index.html

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe666;</span>
+                <div class="name">图片</div>
+                <div class="code-name">&amp;#xe666;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe6e4;</span>
                 <div class="name">超链接</div>
@@ -558,9 +564,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1650358178587') format('woff2'),
+  src: url('iconfont.woff2?t=1650596962167') format('woff2'),
-       url('iconfont.woff?t=1650358178587') format('woff'),
+       url('iconfont.woff?t=1650596962167') format('woff'),
-       url('iconfont.ttf?t=1650358178587') format('truetype');
+       url('iconfont.ttf?t=1650596962167') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -586,6 +592,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-tupian"></span>
+            <div class="name">
+              图片
+            </div>
+            <div class="code-name">.icon-tupian
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-chaolianjie1"></span>
             <div class="name">
@@ -1342,6 +1357,14 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tupian"></use>
+                </svg>
+                <div class="name">图片</div>
+                <div class="code-name">#icon-tupian</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-chaolianjie1"></use>

frontend/src/styles/deicon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1650358178587') format('woff2'),
+  src: url('iconfont.woff2?t=1650596962167') format('woff2'),
-       url('iconfont.woff?t=1650358178587') format('woff'),
+       url('iconfont.woff?t=1650596962167') format('woff'),
-       url('iconfont.ttf?t=1650358178587') format('truetype');
+       url('iconfont.ttf?t=1650596962167') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-tupian:before {
+  content: "\e666";
+}
+
 .icon-chaolianjie1:before {
   content: "\e6e4";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1278123",
+      "name": "图片",
+      "font_class": "tupian",
+      "unicode": "e666",
+      "unicode_decimal": 58982
+    },
     {
       "icon_id": "6156146",
       "name": "超链接",