Merge pull request #4123 from dataease/pr@dev@refactor_panel-pdf

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

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

@@ -444,6 +444,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,8 +134,8 @@ 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])

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
@@ -76,7 +76,7 @@
               width="400"
               trigger="click"
             >
-              <panel-detail-info />
+              <panel-detail-info/>
               <i
                 slot="reference"
                 class="el-icon-warning-outline icon-class"
@@ -240,6 +240,7 @@
           >
             <Preview
               v-if="showMainFlag"
+              ref="paneViewPreviewRef"
               :component-data="mainCanvasComponentData"
               :canvas-style-data="canvasStyleData"
               :active-tab="activeTab"
@@ -429,8 +430,8 @@ export default {
     imageWrapperStyle() {
       if (this.exporting) {
         return {
-          width: '2560px',
-          height: '1440px'
+          width: '1280px',
+          height: '720px'
         }
       } else {
         return {
@@ -480,6 +481,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)
     },
@@ -660,7 +671,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')
@@ -691,7 +702,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) // 是图片质量