refactor: 仪表板支持高清PDF导出

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

@@ -229,7 +229,7 @@ export default {
       const canvasWidth = document.getElementById('canvasInfoMain').offsetWidth
       this.scaleWidth = (canvasWidth) * 100 / this.canvasStyleData.width // 获取宽度比
       this.scaleHeight = canvasHeight * 100 / this.canvasStyleData.height// 获取高度比
-      this.$store.commit('setPreviewCanvasScale', (this.scaleWidth / 100), (this.scaleHeight / 100))
+      this.$store.commit('setPreviewCanvasScale', { scaleWidth: (this.scaleWidth / 100), scaleHeight: (this.scaleHeight / 100) })
       this.handleScaleChange()
     },
     resetID(data) {

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

@@ -1195,7 +1195,7 @@ export default {
             matrixStyleOriginWidth: this.matrixStyle.originWidth,
             matrixStyleOriginHeight: this.matrixStyle.originHeight
           })
-        this.$store.commit('setPreviewCanvasScale', this.scalePointWidth, this.scalePointHeight)
+        this.$store.commit('setPreviewCanvasScale', { scaleWidth: this.scalePointWidth, scaleHeight: this.scalePointHeight })
       }
     },
     getShapeStyleIntDeDrag(style, prop) {

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

@@ -316,6 +316,7 @@ export default {
     // 根据仪表板的缩放比例，修改视图内部参数
     mergeScale() {
       const scale = Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient
+      console.log('scale：' + scale + ';this.previewCanvasScale:' + JSON.stringify(this.previewCanvasScale))
       const customAttrChart = JSON.parse(this.sourceCustomAttrStr)
       const customStyleChart = JSON.parse(this.sourceCustomStyleStr)
       recursionTransObj(customAttrTrans, customAttrChart, scale, this.scaleCoefficientType)

frontend/src/components/canvas/utils/style.js

@@ -94,8 +94,6 @@ export const customAttrTrans = {
     'barWidth',
     'lineWidth',
     'lineSymbolSize',
-    'pieInnerRadius',
-    'pieOuterRadius',
     'funnelWidth', // 漏斗图 最大宽度
     'tableTitleFontSize',
     'tableItemFontSize',

frontend/src/store/index.js

@@ -140,12 +140,12 @@ const data = {
     setCurCanvasScale(state, curCanvasScale) {
       state.curCanvasScale = curCanvasScale
     },
-    setPreviewCanvasScale(state, scaleWidth, scaleHeight) {
-      if (scaleWidth) {
-        state.previewCanvasScale.scalePointWidth = scaleWidth
+    setPreviewCanvasScale(state, scale) {
+      if (scale.scaleWidth) {
+        state.previewCanvasScale.scalePointWidth = scale.scaleWidth
       }
-      if (scaleHeight) {
-        state.previewCanvasScale.scalePointHeight = scaleHeight
+      if (scale.scaleHeight) {
+        state.previewCanvasScale.scalePointHeight = scale.scaleHeight
       }
     },
     setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {

frontend/src/views/panel/export/PDFPreExport.vue

@@ -4,11 +4,11 @@
     style="height: 100%;width: 100%;"
     :element-loading-text="$t('panel.export_loading')"
     element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
+    element-loading-background="rgba(0, 0, 0, 1)"
   >
     <el-row class="export_body_class">
-      <div id="exportPdf" ref="exportPdf">
-        <div class="export_body_inner_class" v-html="templateContentChange" />
+      <div id="exportPdf" ref="exportPdf" :style="mainCanvasStyle">
+        <div class="export_body_inner_class" :style="templateHtmlStyle" v-html="templateContentChange" />
       </div>
     </el-row>
     <el-row class="root_class">
@@ -26,6 +26,7 @@ import { pdfTemplateReplaceAll } from '@/utils/StringUtils.js'
 
 export default {
   name: 'PDFPreExport',
+  components: { },
   props: {
     // eslint-disable-next-line vue/require-default-prop
     panelName: {
@@ -43,6 +44,7 @@ export default {
   },
   data() {
     return {
+      toExport: false,
       exportLoading: false,
       activeName: '',
       templateContentChange: '',
@@ -60,7 +62,26 @@ export default {
     }
   },
   computed: {
-
+    mainCanvasStyle() {
+      if (this.toExport) {
+        return {
+          width: '4096px'
+        }
+      } else {
+        return {
+          width: '100%'
+        }
+      }
+    },
+    templateHtmlStyle() {
+      if (this.toExport) {
+        return {
+          fontSize: '48px!important'
+        }
+      } else {
+        return {}
+      }
+    }
   },
   watch: {
     templateContent(newVal, oldVla) {
@@ -92,19 +113,22 @@ export default {
       const _this = this
       _this.exportLoading = true
       setTimeout(() => {
-        html2canvas(document.getElementById('exportPdf')).then(function(canvas) {
-          _this.exportLoading = false
-          const contentWidth = canvas.width
-          const contentHeight = canvas.height
-          const pageData = canvas.toDataURL('image/jpeg', 1.0)
-          const lp = contentWidth > contentHeight ? 'l' : 'p'
-          const PDF = new JsPDF(lp, 'pt', [contentWidth, contentHeight])
-          PDF.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight)
-          PDF.save(_this.panelName + '.pdf')
-          _this.$emit('closePreExport')
-        }
-        )
-      }, 50)
+        _this.toExport = true
+        setTimeout(() => {
+          html2canvas(document.getElementById('exportPdf')).then(function(canvas) {
+            _this.exportLoading = false
+            const contentWidth = canvas.width
+            const contentHeight = canvas.height
+            const pageData = canvas.toDataURL('image/jpeg', 1.0)
+            const lp = contentWidth > contentHeight ? 'l' : 'p'
+            const PDF = new JsPDF(lp, 'pt', [contentWidth, contentHeight])
+            PDF.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight)
+            PDF.save(_this.panelName + '.pdf')
+            _this.$emit('closePreExport')
+          }
+          )
+        }, 1500)
+      }, 500)
     }
 
   }

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

@@ -4,7 +4,7 @@
     style="height: 100%;width: 100%;"
     :element-loading-text="$t('panel.data_loading')"
     element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
+    element-loading-background="rgba(0, 0, 0, 1)"
   >
     <el-col v-if="panelInfo.name.length>0" class="panel-design">
 
@@ -73,9 +73,10 @@
       </el-row>
       <!-- 仪表板预览区域-->
       <el-row class="panel-design-preview">
-        <div id="imageWrapper" ref="imageWrapper" style="width: 100%;height: 100%">
+        <!--        <div id="imageWrapper" ref="imageWrapper" style="width: 4096px;height: 2160px">-->
+        <div id="imageWrapper" ref="imageWrapper" :style="imageWrapperStyle">
           <fullscreen style="height: 100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="fullscreen">
-            <Preview v-if="showMain" :in-screen="!fullscreen" :show-type="'width'" :screen-shot="dataLoading" />
+            <Preview v-if="showMainFlag" :in-screen="!fullscreen" :show-type="'width'" :screen-shot="dataLoading" />
           </fullscreen>
         </div>
       </el-row>
@@ -129,6 +130,7 @@ import { starStatus, saveEnshrine, deleteEnshrine } from '@/api/panel/enshrine'
 import bus from '@/utils/bus'
 import { queryAll } from '@/api/panel/pdfTemplate'
 import ShareHead from '@/views/panel/GrantAuth/ShareHead'
+import JsPDF from 'jspdf'
 
 export default {
   name: 'PanelViewShow',
@@ -154,10 +156,27 @@ export default {
       pdfExportShow: false,
       snapshotInfo: '',
       showType: 0,
-      dataLoading: false
+      dataLoading: false,
+      exporting: false
     }
   },
   computed: {
+    imageWrapperStyle() {
+      if (this.exporting) {
+        return {
+          width: '4096px',
+          height: '2160px'
+        }
+      } else {
+        return {
+          width: '100%',
+          height: '100%'
+        }
+      }
+    },
+    showMainFlag() {
+      return this.showMain
+    },
     panelInfo() {
       return this.$store.state.panel.panelInfo
     },
@@ -252,17 +271,24 @@ export default {
     },
 
     downloadAsPDF() {
+      // this.pdfExportShow = true
+      //
       this.dataLoading = true
+
       setTimeout(() => {
-        html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
-          const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量
-          this.dataLoading = false
-          if (snapshot !== '') {
-            this.snapshotInfo = snapshot
-            this.pdfExportShow = true
-          }
-        })
-      }, 50)
+        this.exporting = true
+        setTimeout(() => {
+          html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
+            const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量
+            this.dataLoading = false
+            this.exporting = false
+            if (snapshot !== '') {
+              this.snapshotInfo = snapshot
+              this.pdfExportShow = true
+            }
+          })
+        }, 1500)
+      }, 500)
     },
     refreshTemplateInfo() {
       this.templateInfo = {}