vue2 将页面生成pdf下载

项目场景：

在项目开发的过程中，经常有下载一些报表，有部分要求文档是pdf格式的文件，这时候可以插件快速地搭建一个将页面生成pdf文件的功能。

---

依赖支持

本次项目中主要使用的nodejs: 14.20.0，npm版本是6.14.17。

npm install --save jspdf
npm install --save html2canvas;
npm install vue-router@3

---

实施步骤：

1、创建vue2项目

2、配置路由 router

3、搭建下载功能

        创建utils文件夹，文件夹内创建htmlToPdf.js文件，并将其加载在main.js

import htmlToPdf from '@/utils/htmlToPdf'Vue.use(htmlToPdf)

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) => {let contentWidth = canvas.widthlet contentHeight = canvas.height//一页pdf显示html页面生成的canvas高度;let pageHeight = contentWidth / 592.28 * 841.89//未生成pdf的html页面高度let leftHeight = contentHeight//页面偏移let position = 0//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高let imgWidth = 595.28let imgHeight = 592.28 / contentWidth * contentHeightlet pageData = canvas.toDataURL('image/jpeg', 1.0)let 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 -= pageHeightposition -= 841.89//避免添加空白页if (leftHeight > 0) {PDF.addPage()}}}if (isDownload) {PDF.save(title + '.pdf')}// 删除本地存储的base64字段var pdfData = PDF.output('datauristring')//获取base64Pdfresolve(pdfData)} ).catch(error=>{reject(error)})})}}
}

4、开发功能,其中代码如下。初步的使用，已经可以下载pdf，具体的使用，需要根据自身的需求进行调整。

<template><div class="hello"><h1>{{ msg }}</h1><p>For a guide and recipes on how to configure / customize this project,<br>check out the<a @click="initData()" target="_blank" rel="noopener">vue-cli documentation</a>.</p><button @click="toGetPdf()">下载PDF</button>//这种情况是只下载，不上传后端<!-- <button @click="toGetPdf(1, 0)">下载PDF</button>//这种情况是只走上传后端接口，不下载 --></div>
</template><script>
import { jsPDF } from "jspdf";// Default export is a4 paper, portrait, using millimeters for unitsexport default {name: 'HelloWorld',data(){return {actName:'1111'}},methods:{initData(){const doc = new jsPDF();doc.text("Hello world!", 10, 10);doc.save("a4.pdf");},toGetPdf( ) {/*** val 决定走不走上传接口，默认为不上传给后端* download 默认是下载* //* */this.$nextTick(() => {setTimeout(() => {window.scrollTo(0, 0);     //这行代码很重要，它让页面的滚动条跳到了最上方如果点击打印按钮的时候,滚动条没有在最上方,打印内容会是不完整的,体验也会差let title ="pdf文件"this.getPdf(title, true) //download：false为不下载，这里调用了刚刚引用的全局函数，.then得到的值是base64位的pdf文件}, 1000);});},},}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

---

项目总结：

方法并不是很难，稍微了解，说不定以后得项目中，会使用到。

从项目中学习，然后自己重构，有助于自身快速的成长。