1、安装插件
npm install jspdf --save
npn install html2canvas --save // 导出下载Excel也会用到
2、实现代码
/**
* #content为id为content下的下载内容
* scale: 2 - 2倍图保证清晰度
* addImage中参数，第三个参数590为pdf宽度，第四个参数为页码*每页高度
* doc.addPage()，每绘制一页需要调用addPage增加一页
*/
html2canvas(document.querySelector('#content'), { scale: 2 }).then(canvas => {
const contentHeight = canvas.height;
const pageNum = Math.floor(contentHeight / 2 / 1092);
// 使用toDataURL转化为Base64编码
const pageData = canvas.toDataURL('image/jpeg', 1.0);
// 参数：纵向横向选择：'p'纵向，'l'横向，
// 第二个单位，第三个尺寸格式，如[200,300]，可以也直接写'a4'等标准纸张大小
const doc = new JsPdf('p', 'pt', 'a4');
// 参数：图片内容，左偏移，上偏移，宽度，高度，a4大小的宽高为595.28，841.89
doc.addImage(pageData, 0, 0, 590, 841 * pageNum, 'img');
if (pageNum > 1) {
for (let i = 1; i < pageNum; i += 1) {
doc.addPage();
doc.addImage(pageData, 0, -i * 841, 590, 841 * pageNum, 'img');
}
}
doc.save('健康报告.pdf'); // 参数：导出文件的命名
});
- 由于需求是保存几十页的打印报告，用这个插件保存的pdf到第8页后背景和图片就不显示了，文字还会显示，用插件保存的是30M左右，用window.print()保存的只有3.2M，并且清晰度上用window.print()保存的要清晰些
- 由于8页以后页面显示问题，就暂时先用window.print()保存，之后会研究看是否有更好的替代插件
- 8页以内保存的pdf还是可以实现的
- 参考了很多网上关于pdf.js的保存方案，大多数都是保存两三页的demo，在做下载动态就算多页的情况下费了很大劲，最后还是在8页以后翻车了，以后找到好的方案再补充
