Merge pull request #701 from dataease/pr@dev@feat_panel-export-pdf

feat:将仪表板导出为pdf

frontend/package.json

@@ -28,6 +28,7 @@
     "html2canvasde": "^v1.1.4-de",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
+    "jspdf": "^2.3.1",
     "lodash": "4.17.21",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",

frontend/src/lang/en.js

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

frontend/src/lang/tw.js

@@ -1128,6 +1128,7 @@ export default {
     store: '收藏',
     save_to_panel: '保存為模板',
     export_to_panel: '導出為模板',
+    export_to_pdf: '導出為PDF',
     preview: '預覽',
     fullscreen_preview: '全屏預覽',
     new_tab_preview: '新Tab頁預覽',

frontend/src/lang/zh.js

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

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

@@ -21,6 +21,11 @@
                 <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>
+            </span>
             <span style="float: right;margin-right: 10px">
               <el-tooltip :content="$t('panel.fullscreen_preview')">
                 <el-button class="el-icon-view" size="mini" circle @click="clickFullscreen" />
@@ -80,6 +85,7 @@ import html2canvas from 'html2canvasde'
 import FileSaver from 'file-saver'
 import { enshrineList, saveEnshrine, deleteEnshrine } from '@/api/panel/enshrine'
 import bus from '@/utils/bus'
+import JsPDF from 'jspdf'
 export default {
   name: 'PanelViewShow',
   components: { Preview, SaveToTemplate },
@@ -172,6 +178,33 @@ export default {
         }
       })
     },
+
+    downloadAsPDF() {
+      html2canvas(this.$refs.imageWrapper).then(canvas => {
+        const contentWidth = canvas.width
+        const contentHeight = canvas.height
+        const pageHeight = contentWidth / 592.28 * 841.89
+        let leftHeight = contentHeight
+        let position = 0
+        const imgWidth = 595.28
+        const imgHeight = 592.28 / contentWidth * contentHeight
+        const pageData = canvas.toDataURL('image/jpeg', 1.0)
+        const PDF = new JsPDF('', 'pt', 'a4')
+        if (leftHeight < pageHeight) {
+          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
+        } else {
+          while (leftHeight > 0) {
+            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+            leftHeight -= pageHeight
+            position -= 841.89
+            if (leftHeight > 0) {
+              PDF.addPage()
+            }
+          }
+        }
+        PDF.save('PDF-test' + '.pdf')
+      })
+    },
     refreshTemplateInfo() {
       this.templateInfo = {}
       html2canvas(this.$refs.imageWrapper).then(canvas => {