Merge pull request #2155 from dataease/pr@dev@feat_panel-image-export

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

@@ -31,7 +31,7 @@
           class="dialog-css"
           :destroy-on-close="true"
         >
-          <span style="position: absolute;right: 70px;top:15px">
+          <span  v-if="chartDetailsVisible"  style="position: absolute;right: 70px;top:15px">
             <el-dropdown>
               <el-button size="mini">
                 {{ $t('chart.export') }}<i class="el-icon-download" />

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

@@ -153,7 +153,7 @@
       :destroy-on-close="true"
       :show-close="true"
     >
-      <span style="position: absolute;right: 70px;top:15px">
+      <span  v-if="chartDetailsVisible" style="position: absolute;right: 70px;top:15px">
         <el-dropdown>
               <el-button size="mini">
                 {{ $t('chart.export') }}<i class="el-icon-download" />

frontend/src/lang/en.js

@@ -1514,6 +1514,7 @@ export default {
     save_to_panel: 'Save to template',
     export_to_panel: 'Export to template',
     export_to_pdf: 'Export to PDF',
+    export_to_img: 'Export to Image',
     preview: 'Preview',
     fullscreen_preview: 'Fullscreen Preview',
     new_tab_preview: 'New Tab Preview',

frontend/src/lang/tw.js

@@ -1515,6 +1515,7 @@ export default {
     save_to_panel: '保存爲模闆',
     export_to_panel: '導出爲模闆',
     export_to_pdf: '導出爲PDF',
+    export_to_img: '導出爲图片',
     preview: '預覽',
     fullscreen_preview: '全屏預覽',
     new_tab_preview: '新Tab頁預覽',

frontend/src/lang/zh.js

@@ -1522,6 +1522,7 @@ export default {
     save_to_panel: '保存为模板',
     export_to_panel: '导出为模板',
     export_to_pdf: '导出为PDF',
+    export_to_img: '导出为图片',
     preview: '预览',
     fullscreen_preview: '全屏预览',
     new_tab_preview: '新Tab页预览',

frontend/src/views/panel/list/PanelViewShow.vue

@@ -35,14 +35,14 @@
               </el-tooltip>
             </span>
             <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
-              <el-tooltip :content="$t('panel.export_to_panel')">
-                <el-button class="el-icon-download" size="mini" circle @click="downloadToTemplate" />
-              </el-tooltip>
-            </span>
-            <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
-              <el-tooltip :content="$t('panel.export_to_pdf')">
-                <el-button class="el-icon-notebook-2" size="mini" circle @click="downloadAsPDF" />
-              </el-tooltip>
+              <el-dropdown>
+                <el-button size="mini" class="el-icon-download" circle />
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item icon="el-icon-copy-document" @click.native="downloadToTemplate">{{ $t('panel.export_to_panel') }}</el-dropdown-item>
+                  <el-dropdown-item icon="el-icon-notebook-2" @click.native="downloadAsPDF">{{ $t('panel.export_to_pdf') }}</el-dropdown-item>
+                  <el-dropdown-item icon="el-icon-picture-outline" @click.native="downloadAsImage">{{ $t('panel.export_to_img') }}</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
             </span>
             <span style="float: right;margin-right: 10px">
               <el-tooltip :content="$t('panel.fullscreen_preview')">
@@ -138,6 +138,7 @@ import { queryAll } from '@/api/panel/pdfTemplate'
 import ShareHead from '@/views/panel/GrantAuth/ShareHead'
 import { initPanelData } from '@/api/panel/panel'
 import { proxyInitPanelData } from '@/api/panel/shareProxy'
+import { dataURLToBlob } from '@/components/canvas/utils/utils'
 export default {
   name: 'PanelViewShow',
   components: { Preview, SaveToTemplate, PDFPreExport, ShareHead },
@@ -282,6 +283,34 @@ export default {
       }, 50)
     },
 
+    downloadAsImage() {
+      this.dataLoading = true
+      setTimeout(() => {
+        this.exporting = true
+        setTimeout(() => {
+          const canvasID = document.getElementById('canvasInfoTemp')
+          const a = document.createElement('a')
+          html2canvas(canvasID).then(canvas => {
+            this.exporting = false
+            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', this.$store.state.panel.panelInfo.name + '.png')
+            document.body.appendChild(a)
+            a.click()
+            URL.revokeObjectURL(blob)
+            document.body.removeChild(a)
+            setTimeout(() => {
+              this.dataLoading = false
+            }, 300)
+          })
+        }, 500)
+      }, 0)
+    },
+
     downloadAsPDF() {
       // this.pdfExportShow = true
       //