feat:仪表板导出支持模板选择功能

backend/src/main/java/io/dataease/controller/panel/PanelPdfTemplateController.java

@@ -0,0 +1,33 @@
+package io.dataease.controller.panel;
+
+import com.github.xiaoymin.knife4j.annotations.ApiSupport;
+import io.dataease.base.domain.PanelPdfTemplate;
+import io.dataease.service.panel.PanelPdfTemplateService;
+import io.swagger.annotations.Api;
+import org.springframework.web.bind.annotation.*;
+
+import javax.annotation.Resource;
+import java.util.List;
+
+
+/**
+ * Author: wangjiahao
+ * Date: 2021-03-05
+ * Description:
+ */
+@Api(tags = "仪表板：PDF导出模板")
+@ApiSupport(order = 170)
+@RestController
+@RequestMapping("pdf-template")
+public class PanelPdfTemplateController {
+
+    @Resource
+    private PanelPdfTemplateService panelPdfTemplateService;
+
+    @GetMapping("queryAll")
+    public List<PanelPdfTemplate> queryAll(){
+        return panelPdfTemplateService.queryAll();
+    }
+
+
+}

backend/src/main/java/io/dataease/service/panel/PanelPdfTemplateService.java

@@ -0,0 +1,27 @@
+package io.dataease.service.panel;
+
+import io.dataease.base.domain.PanelPdfTemplate;
+import io.dataease.base.domain.PanelPdfTemplateExample;
+import io.dataease.base.mapper.PanelPdfTemplateMapper;
+import org.springframework.stereotype.Service;
+
+import javax.annotation.Resource;
+import java.util.List;
+
+/**
+ * Author: wangjiahao
+ * Date: 9/1/21
+ * Description:
+ */
+@Service
+public class PanelPdfTemplateService {
+
+    @Resource
+    private PanelPdfTemplateMapper panelPdfTemplateMapper;
+
+    public List<PanelPdfTemplate> queryAll(){
+        PanelPdfTemplateExample example = new PanelPdfTemplateExample();
+        example.setOrderByClause("sort asc");
+        return panelPdfTemplateMapper.selectByExampleWithBLOBs(example);
+    }
+}

backend/src/main/resources/db/migration/V26__de1.3.sql

@@ -4,4 +4,19 @@
 BEGIN;
 INSERT INTO `sys_msg_type` VALUES (7, 0, 'i18n_msg_type_ds_invalid', 'datasource', 'to-msg-ds');
 INSERT INTO `sys_msg_type` VALUES (8, 7, 'i18n_msg_type_ds_invalid', 'datasource', 'to-msg-ds');
-COMMIT;
+COMMIT;
+
+
+-- ----------------------------
+-- Table structure for panel_pdf_template
+-- ----------------------------
+DROP TABLE IF EXISTS `panel_pdf_template`;
+CREATE TABLE `panel_pdf_template` (
+  `id` varchar(50) NOT NULL COMMENT 'id',
+  `name` varchar(255) DEFAULT NULL COMMENT '模板名称',
+  `create_time` bigint(13) DEFAULT NULL COMMENT '创建时间',
+  `create_user` varchar(255) DEFAULT NULL COMMENT '创建人',
+  `template_content` longtext COMMENT '模板内容',
+  `sort` int(8) DEFAULT NULL COMMENT '排序',
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8;

backend/src/main/resources/generatorConfig.xml

@@ -64,7 +64,7 @@
 
         <!--要生成的数据库表 -->
 
-        <table tableName="datasource"/>
+        <table tableName="panel_pdf_template"/>
 <!--        <table tableName="sys_dict_item"/>-->
 <!--        <table tableName="dataset_table_field"/>-->
 <!--        <table tableName="v_chart">-->

frontend/package.json

@@ -45,6 +45,7 @@
     "vue-fullscreen": "^2.5.2",
     "vue-i18n": "7.3.2",
     "vue-router": "3.0.6",
+    "vue-to-pdf": "^1.0.0",
     "vue-uuid": "2.0.2",
     "vuedraggable": "^2.24.3",
     "vuex": "3.1.0",

frontend/src/api/panel/pdfTemplate.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+
+export function queryAll() {
+  return request({
+    url: '/pdf-template/queryAll',
+    method: 'get',
+    loading: true,
+    timeout: 30000
+  })
+}

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

@@ -1,5 +1,5 @@
 <template>
-  <div id="canvasInfoTemp" :style="customStyle" class="bg" @mouseup="deselectCurComponent" @mousedown="handleMouseDown">
+  <div id="canvasInfoTemp" ref="canvasInfoTemp" :style="customStyle" class="bg" @mouseup="deselectCurComponent" @mousedown="handleMouseDown">
     <el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
       {{ $t('panel.panelNull') }}
     </el-row>

frontend/src/icons/svg/PDF.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1630573390175" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2229" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1024 140.8V128c0-19.2-25.6-38.4-44.8-38.4H608V0h-70.4L0 96v832c179.2 32 352 64 531.2 96h70.4v-96h352c19.2 0 44.8 0 57.6-12.8 12.8-19.2 12.8-44.8 12.8-70.4v-704zM326.4 537.6c-25.6 12.8-51.2 12.8-83.2 12.8v128l-64-6.4V313.6c57.6 0 128-25.6 179.2 19.2 51.2 64 38.4 172.8-32 204.8zM985.6 896h-384V128h384v768z" fill="#A33639" p-id="2230"></path><path d="M953.6 832v-51.2h-352V832zM652.8 697.6h300.8v44.8H652.8z m0-160h300.8v44.8H652.8z m0 83.2h300.8v44.8H652.8z m128-332.8c-6.4 25.6-19.2 57.6-32 83.2-64 25.6-64 44.8-64 51.2 0 6.4 6.4 12.8 12.8 19.2h12.8c19.2 0 38.4-19.2 57.6-57.6 25.6-12.8 51.2-19.2 76.8-25.6 12.8 12.8 32 19.2 51.2 19.2 12.8 0 32 0 32-25.6 0-6.4-6.4-25.6-32-25.6-12.8 0-25.6 0-38.4 6.4-19.2-12.8-32-32-38.4-51.2 12.8-38.4 12.8-64 6.4-70.4-6.4-6.4-12.8-6.4-19.2-6.4-6.4 0-19.2 6.4-19.2 12.8-32 19.2-12.8 57.6-6.4 70.4zM704 422.4c6.4-6.4 12.8-12.8 25.6-19.2-6.4 6.4-19.2 12.8-25.6 19.2zM883.2 352c12.8 0 19.2 6.4 19.2 6.4h-12.8c-6.4 0-12.8 0-19.2-6.4h12.8z m-70.4-6.4c-12.8 6.4-25.6 6.4-38.4 12.8 6.4-12.8 12.8-25.6 19.2-44.8 6.4 12.8 12.8 25.6 19.2 32zM787.2 224s6.4 0 0 0c6.4 12.8 6.4 25.6 6.4 32-6.4-12.8-6.4-19.2-6.4-32z m-544 153.6v115.2c19.2 0 51.2 0 64-25.6 12.8-25.6 12.8-51.2 0-76.8-12.8-19.2-38.4-12.8-64-12.8z" fill="#A33639" p-id="2231"></path></svg>

frontend/src/main.js

@@ -77,6 +77,9 @@ Vue.component('DeComplexInput', DeComplexInput)
 Vue.component('DeComplexSelect', DeComplexSelect)
 Vue.config.productionTip = false
 
+import vueToPdf from 'vue-to-pdf'
+Vue.use(vueToPdf)
+
 Vue.prototype.hasDataPermission = function(pTarget, pSource) {
   if (this.$store.state.user.user.isAdmin) {
     return true

frontend/src/styles/index.scss

@@ -277,6 +277,14 @@ div:focus {
   margin: 0 2px 1px 0;
 }
 
+.ds-icon-pdf {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+  color: #0a7be0;
+}
+
+
 .ds-icon-scene {
   width: 13px;
   height: 13px;

frontend/src/utils/StringUtils.js

@@ -0,0 +1,7 @@
+// 替换所有 标准模板格式 为 $panelName$
+export function pdfTemplateReplaceAll(content, source, target) {
+  const pattern = '\\$' + source + '\\$'
+  content = content.replace(new RegExp(pattern, 'gm'), target)
+  return content
+}
+

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

@@ -0,0 +1,32 @@
+<template>
+  <div style="margin-top: 5px">
+    <div> 导出时间：$TIME$</div>
+    <div contenteditable="true"> 可以输入内容</div>
+    <div>
+      <img width="100%" src="$snapshot$">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  computed: {
+  },
+  watch: {
+
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,113 @@
+<template>
+  <el-row>
+    <el-row class="export_body_class">
+      <div id="exportPdf" ref="exportPdf">
+        <div class="export_body_inner_class" v-html="templateContentChange" />
+      </div>
+    </el-row>
+    <el-row class="root_class">
+      <el-button size="mini" @click="cancel()">{{ $t('commons.cancel') }}</el-button>
+      <el-button type="primary" size="mini" @click="save()">导出PDF</el-button>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+import JsPDF from 'jspdf'
+import html2canvas from 'html2canvasde'
+import { formatTimeToStr } from './date.js'
+import { pdfTemplateReplaceAll } from '@/utils/StringUtils.js'
+
+export default {
+  name: 'PDFPreExport',
+  props: {
+    panelName: {
+      type: String,
+      required: false
+    },
+    snapshot: {
+      type: String,
+      required: true
+    },
+    templateContent: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      activeName: '',
+      templateContentChange: '',
+      time: '',
+      varsInfo: {
+        panelName: this.panelName,
+        snapshot: this.snapshot,
+        userName: this.$store.state.user.user.name
+      },
+      timeInfo: [
+        'yyyy-MM-dd',
+        'yyyy-MM-dd hh:mm:ss'
+      ]
+    }
+  },
+  computed: {
+
+  },
+  watch: {
+    templateContent(newVal, oldVla) {
+      this.initContent()
+    }
+
+  },
+  mounted() {
+    var date = new Date()
+    var _this = this
+    _this.timeInfo.forEach(timeFormat => {
+      _this.varsInfo[timeFormat] = formatTimeToStr(date, timeFormat)
+    })
+
+    this.initContent()
+  },
+  methods: {
+    initContent() {
+      this.templateContentChange = this.templateContent
+      for (const [key, value] of Object.entries(this.varsInfo)) {
+        this.templateContentChange = pdfTemplateReplaceAll(this.templateContentChange, key, value)
+      }
+    },
+
+    cancel() {
+      this.$emit('closePreExport')
+    },
+    save() {
+      const _this = this
+      html2canvas(document.getElementById('exportPdf')).then(function(canvas) {
+        const contentWidth = canvas.width
+        const contentHeight = canvas.height
+        const pageData = canvas.toDataURL('image/jpeg', 1.0)
+        const PDF = new JsPDF('p', 'pt', [contentWidth, contentHeight])
+        PDF.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight)
+        PDF.save(_this.panelName + '.pdf')
+      }
+      )
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+  .root_class {
+    margin: 15px 0px 5px;
+    text-align: center;
+  }
+  .export_body_class{
+    border: 1px solid #dcdfe6 ;
+    height: 500px;
+    overflow-y: auto;
+  }
+
+  .export_body_inner_class{
+    margin: 10px;
+  }
+</style>

frontend/src/views/panel/export/date.js

@@ -0,0 +1,30 @@
+// 对Date的扩展，将 Date 转化为指定格式的String
+// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
+// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
+// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
+// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
+Date.prototype.Format = function(fmt) {
+  var o = {
+    'M+': this.getMonth() + 1, // 月份
+    'd+': this.getDate(), // 日
+    'h+': this.getHours(), // 小时
+    'm+': this.getMinutes(), // 分
+    's+': this.getSeconds(), // 秒
+    'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
+    'S': this.getMilliseconds() // 毫秒
+  }
+  if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length)) }
+  for (var k in o) {
+    if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
+  }
+  return fmt
+}
+
+export function formatTimeToStr(times, pattern) {
+  var d = new Date(times).Format('yyyy-MM-dd hh:mm:ss')
+  if (pattern) {
+    d = new Date(times).Format(pattern)
+  }
+  return d.toLocaleString()
+}
+

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

@@ -54,7 +54,7 @@
       </el-row>
       <!-- 仪表板预览区域-->
       <el-row class="panel-design-preview">
-        <div ref="imageWrapper" style="width: 100%;height: 100%">
+        <div id="imageWrapper" ref="imageWrapper" style="width: 100%;height: 100%">
           <fullscreen style="height: 100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="fullscreen">
             <Preview v-if="showMain" :in-screen="!fullscreen" :show-type="canvasStyleData.selfAdaption?'full':'width'" />
           </fullscreen>
@@ -75,9 +75,31 @@
     >
       <save-to-template :template-info="templateInfo" @closeSaveDialog="closeSaveDialog" />
     </el-dialog>
+    <el-dialog
+      v-if="pdfExportShow"
+      :title="'['+panelInfo.name+']'+'PDF导出'"
+      :visible.sync="pdfExportShow"
+      width="70%"
+      :destroy-on-close="true"
+      class="dialog-css2"
+    >
+      <span style="position: absolute;right: 70px;top:15px">
+        <svg-icon icon-class="PDF" class="ds-icon-pdf" />
+        <el-select v-model="pdfTemplateSelectedIndex" :placeholder="'切换PDF模板'" @change="changePdfTemplate()">
+          <el-option
+            v-for="(item, index) in pdfTemplateAll"
+            :key="index"
+            :label="item.name"
+            :value="index"
+          />
+        </el-select>
+      </span>
+      <PDFPreExport :snapshot="snapshotInfo" :panel-name="panelInfo.name" :template-content="pdfTemplateContent" @closePreExport="closePreExport" />
+    </el-dialog>
   </el-row>
 </template>
 <script>
+import PDFPreExport from '@/views/panel/export/PDFPreExport'
 import Preview from '@/components/canvas/components/Editor/Preview'
 import SaveToTemplate from '@/views/panel/list/SaveToTemplate'
 import { mapState } from 'vuex'
@@ -85,10 +107,11 @@ import html2canvas from 'html2canvasde'
 import FileSaver from 'file-saver'
 import { enshrineList, saveEnshrine, deleteEnshrine } from '@/api/panel/enshrine'
 import bus from '@/utils/bus'
-import JsPDF from 'jspdf'
+import { queryAll } from '@/api/panel/pdfTemplate'
+
 export default {
   name: 'PanelViewShow',
-  components: { Preview, SaveToTemplate },
+  components: { Preview, SaveToTemplate, PDFPreExport },
   props: {
     activeTab: {
       type: String,
@@ -98,11 +121,16 @@ export default {
   data() {
     return {
       showMain: true,
+      pdfTemplateSelectedIndex: 0,
+      pdfTemplateContent: '',
       templateInfo: {},
+      pdfTemplateAll: [],
       templateSaveTitle: '保存为模板',
       templateSaveShow: false,
       hasStar: false,
-      fullscreen: false
+      fullscreen: false,
+      pdfExportShow: false,
+      snapshotInfo: ''
     }
   },
   computed: {
@@ -133,8 +161,15 @@ export default {
     }
   },
   mounted() {
+    this.initPdfTemplate()
   },
   methods: {
+    initPdfTemplate() {
+      queryAll().then(res => {
+        this.pdfTemplateAll = res.data
+        this.changePdfTemplate()
+      })
+    },
     clickFullscreen() {
       this.fullscreen = true
     },
@@ -144,7 +179,7 @@ export default {
     },
     saveToTemplate() {
       this.templateSaveShow = true
-      html2canvas(this.$refs.imageWrapper).then(canvas => {
+      html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
         const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.2是图片质量
         if (snapshot !== '') {
           this.templateInfo = {
@@ -162,7 +197,7 @@ export default {
       })
     },
     downloadToTemplate() {
-      html2canvas(this.$refs.imageWrapper).then(canvas => {
+      html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
         const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.2是图片质量
         if (snapshot !== '') {
           this.templateInfo = {
@@ -180,34 +215,17 @@ export default {
     },
 
     downloadAsPDF() {
-      html2canvas(this.$refs.imageWrapper).then(canvas => {
-        const contentWidth = canvas.width
-        const contentHeight = canvas.height
-        const pageHeight = contentWidth / 592.28 * 841.89
-        let leftHeight = contentHeight
-        let position = 0
-        const imgWidth = 595.28
-        const imgHeight = 592.28 / contentWidth * contentHeight
-        const pageData = canvas.toDataURL('image/jpeg', 1.0)
-        const PDF = new JsPDF('', 'pt', 'a4')
-        if (leftHeight < pageHeight) {
-          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
-        } else {
-          while (leftHeight > 0) {
-            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
-            leftHeight -= pageHeight
-            position -= 841.89
-            if (leftHeight > 0) {
-              PDF.addPage()
-            }
-          }
+      html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
+        const snapshot = canvas.toDataURL('image/jpeg', 1) // 0.2是图片质量
+        if (snapshot !== '') {
+          this.snapshotInfo = snapshot
+          this.pdfExportShow = true
         }
-        PDF.save('PDF-test' + '.pdf')
       })
     },
     refreshTemplateInfo() {
       this.templateInfo = {}
-      html2canvas(this.$refs.imageWrapper).then(canvas => {
+      html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
         const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.2是图片质量
         if (snapshot !== '') {
           this.templateInfo = {
@@ -244,6 +262,12 @@ export default {
       if (this.activeTab !== 'PanelList') {
         bus.$emit('panle_start_list_refresh', isStar)
       }
+    },
+    changePdfTemplate() {
+      this.pdfTemplateContent = this.pdfTemplateAll[this.pdfTemplateSelectedIndex].templateContent
+    },
+    closePreExport() {
+      this.pdfExportShow = false
     }
 
   }
@@ -303,4 +327,14 @@ export default {
     flex-flow: row nowrap;
     color: #9ea6b2;
   }
+
+  .dialog-css2 ::v-deep .el-dialog__title {
+    font-size: 14px!important;
+  }
+  .dialog-css2 ::v-deep .el-dialog__header {
+    padding: 20px 20px 0!important;
+  }
+  .dialog-css2 ::v-deep .el-dialog__body {
+    padding: 0px 20px!important;
+  }
 </style>