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内容会打印不全