一、安装插件?
npm install --save html2canvas // 页面转图片
npm install jspdf --save // 图片转pdf
二、直接使用代码
1.引入库
代码如下(示例):
exportPdf(el, title) {
html2canvas(el, {
useCORS: true,
allowTaint: true,
dpi: 192,//导出pdf清晰度
scale:2,
})
.then((canvas) => {
// 内容的宽度
const contentWidth = canvas.width;
// 内容高度
const contentHeight = canvas.height;
// 一页pdf显示html页面生成的canvas高度,a4纸的尺寸[595.28,841.89];
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;
// canvas转图片数据
const pageData = canvas.toDataURL("image/jpeg", 1.0);
// 新建JsPDF对象
const PDF = new JsPDF("", "pt", "a4");
// 判断是否分页
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();
}
}
}
// 保存文件
PDF.save(title + ".pdf");
})
.catch((e) => {console.log(e)})
.finally(() => {
});
}
注意: css的样式要写好
参考连接: https://blog.csdn.net/weixin_45389051/article/details/132698573