From 7d09bcc788ed99891ee319c60409770d7c4a83ae Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 19 Dec 2022 16:56:57 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E8=B6=85=E9=95=BF=E4=BB=AA=E8=A1=A8=E6=9D=BF=E5=AF=BC=E5=87=BA?=
 =?UTF-8?q?PDF=E3=80=81=E5=9B=BE=E7=89=87=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/editor/Preview.vue      |  3 +++
 .../src/views/panel/export/PDFPreExport.vue   |  8 +++----
 .../src/views/panel/list/PanelViewShow.vue    | 23 ++++++++++++++-----
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/canvas/components/editor/Preview.vue b/frontend/src/components/canvas/components/editor/Preview.vue
index a2232340e1..05a8e141af 100644
--- a/frontend/src/components/canvas/components/editor/Preview.vue
+++ b/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
diff --git a/frontend/src/views/panel/export/PDFPreExport.vue b/frontend/src/views/panel/export/PDFPreExport.vue
index a2042fa5e7..cc87cdb17a 100644
--- a/frontend/src/views/panel/export/PDFPreExport.vue
+++ b/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])
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index 46e9d618cd..a89a232b22 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/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) // 是图片质量