feat：导出 pdf 添加时间

nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue

@@ -761,7 +761,7 @@ export default {
               // document.getElementsByTagName('html')[0].style.overflow = 'visible'
               const position = dom.getBoundingClientRect()
               console.log(position)
-              this.getPdf(dom, -1 * position.left, -1 * position.top)
+              this.getPdf(dom, -1 * position.left, -1 * position.top,this.searchTime)
               // this.getPdf(dom, 0, 0)
             }, 2000)
           }

nezha-fronted/src/components/common/js/htmlToPdf.js

@@ -4,7 +4,7 @@ import { Loading } from 'element-ui' // 此处根据你实际使用的框架的l
 let loading
 export default {
   install (Vue, options) {
-    Vue.prototype.getPdf = function (dom, x, y) { // 传入需要导出的 dom
+    Vue.prototype.getPdf = function (dom, x, y, time) { // 传入需要导出的 dom
       const title = this.htmlTitle || 'pdf'
       // html2Canvas(document.querySelector('#pdfDom'), { //这是在界面上设置一个id
       // 只下载id为pdfDom的内容
@@ -34,31 +34,38 @@ export default {
         console.log(canvas)
         // canvas.paddingTop = '30px'
         const pageDataImg = canvas.toDataURL('image/jpeg', 1.0)
-        const canvasBox = document.createElement('canvas')
+        const img = new Image()
-        canvasBox.setAttribute('width', contentWidth + 30 + '')
+        img.src = pageDataImg
-        canvasBox.setAttribute('height', pageHeight + '')
+        img.onload = function () {
-        const ctx = canvasBox.getContext('2d')
+          const canvasBox = document.createElement('canvas')
-        ctx.font = '24 Arial'
+          canvasBox.setAttribute('width', contentWidth + 30 + '')
-        ctx.strokeStyle = 'rgb(0,0,0)'
+          canvasBox.setAttribute('height', contentHeight + '')
-        ctx.strokeText('九段刀客', 10, 10)
+          const ctx = canvasBox.getContext('2d')
-        ctx.drawImage(pageDataImg, 0, 30, contentWidth, contentHeight)
+          ctx.fillStyle = '#fff'
-        const pageData = canvasBox.toDataURL('image/jpeg', 1.0)
+          ctx.fillRect(0, 0, contentWidth + 30, contentHeight)
-        const PDF = new JsPDF('', 'pt', 'a4')
+          ctx.font = '12pt Roboto-Regular'
-        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+          ctx.strokeStyle = '#333333'
-        // 当内容未超过pdf一页显示的范围，无需分页
+          ctx.fillStyle = '#333333'
-        if (leftHeight < pageHeight) {
+          ctx.fillText(time[0] + ' - ' + time[1], 10, 24)
-          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
+          ctx.drawImage(this, 0, 30, contentWidth, contentHeight)
-        } else {
+          const pageData = canvasBox.toDataURL('image/jpeg', 1.0)
-          while (leftHeight > 0) {
+          const PDF = new JsPDF('', 'pt', 'a4')
-            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+          // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
-            leftHeight -= pageHeight
+          // 当内容未超过pdf一页显示的范围，无需分页
-            position -= 841.89
+          if (leftHeight < pageHeight) {
-            if (leftHeight > 0) {
+            PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
-              PDF.addPage()
+          } else {
+            while (leftHeight > 0) {
+              PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+              leftHeight -= pageHeight
+              position -= 841.89
+              if (leftHeight > 0) {
+                PDF.addPage()
+              }
             }
           }
+          PDF.save(title + '.pdf')
         }
-        PDF.save(title + '.pdf')
       })
     }
     Vue.prototype.showScreenLoading = function (flag) {

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -849,7 +849,7 @@ export default {
               // document.getElementsByTagName('html')[0].style.overflow = 'visible'
               const position = dom.getBoundingClientRect()
               console.log(position)
-              this.getPdf(dom, -1 * position.left, -1 * position.top)
+              this.getPdf(dom, -1 * position.left, -1 * position.top, this.searchTime)
               // this.getPdf(dom, 0, 0)
             }, 2000)
           }
@@ -904,9 +904,6 @@ export default {
       }, 100)
     }
   },
-  beforeDestroy () {
-    this.$store.dispatch('dispatchPanelLock', { flag: true })
-  },
   watch: {
     'filter.searchName': function (n, o) {
       const temp = this
@@ -958,6 +955,7 @@ export default {
     }
   },
   beforeDestroy () {
+    this.$store.dispatch('dispatchPanelLock', { flag: true })
     if (document.querySelector('#tableList')) {
       document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter)
       document.querySelector('#tableList').removeEventListener('mouseleave', this.tableListLeave)

nezha-fronted/static/config.json

@@ -1 +1 @@
-{"baseUrl":"http://192.168.40.42:8080/", "version": "21.04"}
+{"baseUrl":"/", "version": "21.04"}