refactor(仪表板): 超长仪表板导出PDF、图片优化

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

@@ -443,6 +443,9 @@ export default {
     bus.$off('trigger-reset-button', this.triggerResetButton)
   },
   methods: {
+    getCanvasHeight() {
+      return this.mainHeightCount
+    },
     openChartDetailsDialog(paramInfo) {
       if (this.canvasId === 'canvas-main') {
         this.showChartInfo = paramInfo.showChartInfo

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

@@ -82,7 +82,7 @@ export default {
     mainCanvasStyle() {
       if (this.toExport) {
         return {
-          width: '4096px'
+          width: '1280px'
         }
       } else {
         return {
@@ -93,7 +93,7 @@ export default {
     templateHtmlStyle() {
       if (this.toExport) {
         return {
-          fontSize: '48px!important'
+          fontSize: '14px!important'
         }
       } else {
         return {}
@@ -134,16 +134,15 @@ export default {
         setTimeout(() => {
           html2canvas(document.getElementById('exportPdf')).then(function(canvas) {
             _this.exportLoading = false
-              const contentWidth = canvas.width / 4
-              const contentHeight = canvas.height / 4
+            const contentWidth = canvas.width / 2
+            const contentHeight = canvas.height / 2
             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

@@ -17,7 +17,7 @@
         style="border-bottom: 1px solid;border-bottom-color:#E6E6E6;"
       >
         <div style="height: 100%;">
-          <share-head />
+          <share-head/>
         </div>
       </el-row>
       <el-row
@@ -45,7 +45,7 @@
               width="400"
               trigger="click"
             >
-              <panel-detail-info />
+              <panel-detail-info/>
               <i
                 slot="reference"
                 class="el-icon-warning icon-class"
@@ -209,6 +209,7 @@
           >
             <Preview
               v-if="showMainFlag"
+              ref="paneViewPreviewRef"
               :component-data="mainCanvasComponentData"
               :canvas-style-data="canvasStyleData"
               :active-tab="activeTab"
@@ -378,8 +379,8 @@ export default {
     imageWrapperStyle() {
       if (this.exporting) {
         return {
-          width: '2560px',
-          height: '1440px'
+          width: '1280px',
+          height: '720px'
         }
       } else {
         return {
@@ -429,6 +430,16 @@ export default {
     bus.$off('set-panel-share-user', this.setPanelShareUser)
   },
   methods: {
+    // 画布高度大于6000px 自动使用原尺寸导出 减小浏览器再渲染压力
+    changeExportingState() {
+      const canvasHeight = this.$refs.paneViewPreviewRef.getCanvasHeight()
+      if (canvasHeight && canvasHeight > 6000) {
+        return false
+      } else {
+        return true
+      }
+
+    },
     downLoadApp(appAttachInfo) {
       this.downLoadToApp(appAttachInfo)
     },
@@ -597,7 +608,7 @@ export default {
     downloadAsImage() {
       this.dataLoading = true
       setTimeout(() => {
-        this.exporting = true
+        this.exporting = this.changeExportingState()
         setTimeout(() => {
           const canvasID = document.getElementById(this.canvasInfoTemp)
           const a = document.createElement('a')
@@ -628,7 +639,7 @@ export default {
       this.dataLoading = true
 
       setTimeout(() => {
-        this.exporting = true
+        this.exporting = this.changeExportingState()
         setTimeout(() => {
           html2canvas(document.getElementById(this.canvasInfoTemp)).then(canvas => {
             const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量