html2canvas + jspdf 实现 html导出pdf
1、下载插件
npm install html2canvas jspdf --save
2、utils中创建htmlToPdf.js文件，代码：
// import {showFullScreenLoading,hideFullScreenLoading} from "@/utils/pageLoading.js";import html2Canvas from "html2canvas";import JsPDF from "jspdf";export default {install(Vue, options) {Vue.prototype.getPdf = function() {// showFullScreenLoading("portlet_portlets_pdf", "下载文件准备中...");var title = this.htmlTitle;html2Canvas(document.querySelector("#pdfDom"), {allowTaint: true}).then(function(canvas) {let contentWidth = canvas.width; //获取宽度let contentHeight = canvas.height; //获取高度let pageHeight = (contentWidth / 592.28) * 841.89; //A4纸的宽高let leftHeight = contentHeight;let position = 0; //偏移量let imgWidth = 595.28;let imgHeight = (592.28 / contentWidth) * contentHeight;let pageData = canvas.toDataURL("image/jpeg", 1.0); //把canvas通过base64转成图片数据let PDF = new JsPDF("", "pt", "a4"); // 三个参数 第一个参数(1 横向 p竖向) 第二个px单位大小 a4:pdf规格if (leftHeight < pageHeight) {//判断图片高度是否高于pdf高度PDF.addImage(pageData, "JPEG", 3, 20, imgWidth, imgHeight); // 0:距离左边0像素 20：距离顶部20像素} else {while (leftHeight > 0) {//判断是否到图片底部PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight); //把图片放进pdf中leftHeight -= pageHeight;position -= 841.89;if (leftHeight > 0) {PDF.addPage(); //分页}}}PDF.save(title + ".pdf"); //导出的文件名setTimeout(() => {// hideFullScreenLoading();}, 400);});};}};
3、在main.js中引入定义好的方法，并注册
import htmlToPdf from '@/components/utils/htmlToPdf'Vue.use(htmlToPdf)
4、在要导出的页面中，点击时调用绑定在Vue原型上的getPdf方法，传入id
<div id="pdfDom"><div :model="pageData"><div>{{pageData.title}}</div></div></div><el-button type="primary" icon="el-icon-download" size="small" @click="getPdf('#pdfDom')">导出pdf</el-button>export default {data () {return {pageData:{title:'宝鹃，你知道吗,我觉得自己好累,从来没有这么累过,可是我知道当我早上7点睁开眼睛,我又要受人摆布，又要起床去打工,可是宝鹃,我真的觉得我已经精疲力尽,打不动工了'}htmlTitle: '导出PDF的文件名'}}}
缺点：
导出的pdf不够清晰
多页时会出现内容分割的情况
页面内容过宽的时候，生成的pdf内容会打印不全
