课题列表pdf导出和代码修改

package.json

@@ -25,9 +25,11 @@
     "gm-crypt": "^0.0.2",
     "helmet": "^7.1.0",
     "html-loader": "^1.1.0",
+    "html2canvas": "^1.4.1",
     "js-base64": "^2.6.2",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
+    "jspdf": "^2.5.2",
     "markdown-loader": "^5.1.0",
     "moment": "^2.30.1",
     "normalize.css": "7.0.0",
@@ -41,7 +43,7 @@
     "vue": "2.7.10",
     "vue-cropper": "^0.5.4",
     "vue-pdf": "^4.1.0",
-    "vue-router": "3.0.6",
+    "vue-router": "^3.6.5",
     "vue-ueditor-wrap": "^2.5.6",
     "vuedraggable": "^2.23.2",
     "vuex": "3.1.0"

src/main.js

@@ -11,6 +11,10 @@ import xhr from '@/utils/request'
 import '@/styles/index.scss' // global css
 // 样式文件切换，通过localStorage存储的theme变量决定用哪套样式文件
 
+import htmlToPdf from '@/utils/htmlToPdf'
+
+Vue.use(htmlToPdf)
+
 // 手动设置皮肤变量，选择项目样式风格(如果没有设置并存储皮肤风格，则默认一套，可手动更改)
 // console.log('aaaa', window.localStorage.getItem('theme'))
 if (!window.localStorage.getItem('theme')) {

src/utils/htmlToPdf.js

+import html2Canvas from 'html2canvas'
+import JsPDF from 'jspdf'
+export default {
+
+  install(Vue) {
+    /**
+     *
+     * @param {*} reportName 下载时候的标题
+     * @param {*} isDownload  是否下载默认为下载，传false不下载
+     */
+    Vue.prototype.getPdf = function(reportName, isDownload = true) {
+      //     var target = document.getElementsByClassName("right-aside")[0];
+      // target.style.background = "#FFFFFF";
+      return new Promise((resolve, reject) => {
+        var title = reportName
+        html2Canvas(document.querySelector('#app'), {
+          allowTaint: true
+        }).then((canvas) => {
+          const contentWidth = canvas.width
+          const contentHeight = canvas.height
+          // 一页pdf显示html页面生成的canvas高度;
+          const pageHeight = contentWidth / 592.28 * 841.89
+          // 未生成pdf的html页面高度
+          let leftHeight = contentHeight
+          // 页面偏移
+          let position = 0
+          // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+          const imgWidth = 595.28
+          const imgHeight = 592.28 / contentWidth * contentHeight
+          const pageData = canvas.toDataURL('image/jpeg', 1.0)
+          const PDF = new JsPDF('', 'pt', 'a4')
+          // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+          // 当内容未超过pdf一页显示的范围，无需分页
+          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()
+              }
+            }
+          }
+          if (isDownload) {
+            PDF.save(title + '.pdf')
+          }
+          // 删除本地存储的base64字段
+          var pdfData = PDF.output('datauristring')// 获取base64Pdf
+          resolve(pdfData)
+        }
+        ).catch(error => {
+          reject(error)
+        })
+      })
+    }
+  }
+}

src/views/myTopic/newTopic/index_e.vue

+<template>
+  <div>
+    <div style="margin-top: 50px;text-align: center">
+      <el-button type="primary" @click="exportPDF">导出PDF</el-button>
+      <el-button type="primary" @click="exportPDF2">导出PDF2</el-button>
+      <el-button type="primary" @click="getPdf()">导出PDF3</el-button>
+    </div>
+    <div
+      id="pdfDom"
+      ref="pdfContent"
+      style="margin-left: 200px;
+      margin-top: 20px;
+      margin-right: 150px"
+      width="100%"
+      class="mmm"
+    >
+      <el-table :data="tableData" style="width: 900px; margin-top: 50px;">
+        <el-table-column prop="date" label="日期" width="180" />
+        <el-table-column prop="name" label="姓名" width="180" />
+        <el-table-column prop="address" label="地址" />
+      </el-table>
+      <div style="margin-top: 20px; color: #000000; background: white">
+        王五
+      </div>
+      <div style="margin-top: 40px">
+        <h1>1Element 默认提供一套主\，方便使用者覆盖样式。</h1>
+        <h1>4Element 默认提供一sdfsf套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。</h1>
+        <h1>4Element 默认提供asihduidgfy题，CSS 方便使用者覆盖样式。</h1>
+        <h1>4Element 默认提werwer供一套主题，CSS 命名EM 的风格，方便使用者覆盖样式。</h1>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import jsPDF from 'jspdf'
+import html2canvas from 'html2canvas'
+
+export default {
+  data() {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '李四',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王五',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '张三',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '李武',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }],
+      htmlTitle: 'PDF测试'
+    }
+  },
+  methods: {
+    async exportPDF() {
+      const content = this.$refs.pdfContent
+      const canvas = await html2canvas(content)
+      const imgData = canvas.toDataURL('image/png')
+      // eslint-disable-next-line new-cap
+      const doc = new jsPDF({
+        orientation: 'portrait',
+        unit: 'px',
+        format: 'a4'
+      })
+      const imgProps = doc.getImageProperties(imgData)
+      const pdfWidth = doc.internal.pageSize.getWidth()
+      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width
+      doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight)
+      doc.save('导出pdf测试1.pdf')
+    },
+    exportPDF2() {
+      html2canvas(document.querySelector('#pdfDom'), {
+        allowTaint: false, // 是否允许跨域图像。会污染画布，导致无法使用canvas.toDataURL 方法
+        backgroundColor: '#fff', // 画布背景色（如果未在DOM中指定）。设置null为透明
+        useCORS: true, // 是否尝试使用CORS从服务器加载图像
+        dpi: 500, // 导出pdf清晰度
+        scale: window.devicePixelRatio // 用于渲染的比例。默认为浏览器设备像素比率。
+      }
+      ).then(function(canvas) {
+        var imageData = canvas.toDataURL('image/jpeg', 1.0) // html生成图片的数据
+        const canvasWidth = canvas.width // 原本的html页面的宽高
+        const canvasHeight = canvas.height
+        // 当分辨率是72像素/英寸时，A4纸像素长宽分别是842×595
+        var a4Width = 595 // A4 宽度
+        var a4Height = (595 / canvasWidth) * canvasHeight // A4总高度
+        const pageHeight = canvasWidth / 595 * 842 // 生成pdf的一页显示html的高度
+        let restHeight = canvasHeight // 未生成pdf的html页面高度，最初是整体的高度
+        var position = 0 // 页面上下偏移的大小
+        /**
+           * 参数1：方向：l：横向  p：纵向
+           * 参数2：单位："pt"、"mm"、"cm"、"m"、"in"、"px"
+           * 参数3：格式：默认为a4
+           */
+        // eslint-disable-next-line new-cap
+        var pdf = new jsPDF('p', 'pt', 'a4')
+        if (restHeight < pageHeight) { // 当内容未超过pdf一页显示的范围，无需分页
+          /**
+             * 将图像添加到PDF中
+             * 参数1：图片的url
+             * 参数2：图片的格式
+             * 参数3：图片上下偏移的大小
+             * 参数4：原始宽度
+             * 参数5：原始高度
+             */
+          pdf.addImage(imageData, 'JPEG', 0, position, a4Width, a4Height)
+        } else {
+          while (restHeight > 0) {
+            pdf.addImage(imageData, 'JPEG', 0, position, a4Width, a4Height)
+            restHeight -= pageHeight
+            position -= 842
+            if (restHeight > 0) {
+              pdf.addPage() // 在PDF文档中添加新页面
+            }
+          }
+        }
+        pdf.save('导出pdf测试2' + '.pdf')
+      }
+      )
+    }
+  }
+}
+</script>
+<style>
+.mmm {
+  background: linear-gradient(to right, #39fad7, #f9faa1,#39fad7); /* 标准的语法 */
+}
+</style>