Merge pull request #1480 from dataease/pr@dev@refactor_panel-scale

refactor: 仪表板支持高清PDF导出
2021-12-20 18:51:26 +08:00 · 2021-12-20 18:51:26 +08:00 · 804ff0db21
commit 804ff0db21
parent 184a2a9d5a 03cb1f0630
7 changed files with 88 additions and 39 deletions
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/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) {
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/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) {
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@ -317,6 +317,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)
--- a/frontend/src/components/canvas/utils/style.js
+++ b/frontend/src/components/canvas/utils/style.js
@ -94,8 +94,6 @@ export const customAttrTrans = {
    'barWidth',
    'lineWidth',
    'lineSymbolSize',
-    'pieInnerRadius',
-    'pieOuterRadius',
    'funnelWidth', // 漏斗图 最大宽度
    'tableTitleFontSize',
    'tableItemFontSize',
--- a/frontend/src/store/index.js
+++ b/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 }) {
--- a/frontend/src/views/panel/export/PDFPreExport.vue
+++ b/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)
    }

  }
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/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 = {}