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

2022-04-22 12:01:19 +08:00 · 2022-04-22 12:01:19 +08:00 · 04e965b7ab
commit 04e965b7ab
parent 977c51ef0e
14 changed files with 105 additions and 17 deletions
--- 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"
        >
          <span style="position: absolute;right: 70px;top:15px">
-            <el-button size="mini" @click="exportExcel">
-              <svg-icon icon-class="ds-excel" class="ds-icon-excel" />
-              {{ $t('chart.export_details') }}
+            <el-dropdown>
+              <el-button size="mini">
+                {{ $t('chart.export') }}<i class="el-icon-download" />
              </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 })
--- 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"
    >
      <span style="position: absolute;right: 70px;top:15px">
-        <el-button size="mini" @click="exportExcel">
-          <svg-icon icon-class="ds-excel" class="ds-icon-excel" />
-          {{ $t('chart.export_details') }}
+        <el-dropdown>
+              <el-button size="mini">
+                {{ $t('chart.export') }}<i class="el-icon-download" />
              </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()
    },
--- a/frontend/src/components/canvas/custom-component/UserViewDialog.vue
+++ b/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)
--- 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 })
+}
--- 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',
--- 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: '類別軸',
--- 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: '类别轴',
--- a/frontend/src/styles/deicon/demo_index.html
+++ b/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'),
-       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');
 }
 </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>
--- a/frontend/src/styles/deicon/iconfont.css
+++ b/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'),
-       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 {
@ -13,6 +13,10 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.icon-tupian:before {
+  content: "\e666";
+}
+
 .icon-chaolianjie1:before {
  content: "\e6e4";
 }
--- a/frontend/src/styles/deicon/iconfont.js
+++ b/frontend/src/styles/deicon/iconfont.js
--- a/frontend/src/styles/deicon/iconfont.json
+++ b/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": "超链接",
--- a/frontend/src/styles/deicon/iconfont.ttf
+++ b/frontend/src/styles/deicon/iconfont.ttf
--- a/frontend/src/styles/deicon/iconfont.woff
+++ b/frontend/src/styles/deicon/iconfont.woff
--- a/frontend/src/styles/deicon/iconfont.woff2
+++ b/frontend/src/styles/deicon/iconfont.woff2