通过html2canvas+jsPDF生成PDF文档(多页)
1、安装 html2canvas 库和 jsPDF
npm install html2canvas --save
npm install jspdf --save
2、导入页面
import html2canvas from 'html2canvas';
import { jsPDF } from "jspdf"
3、使用
html2canvas(document.getElementById("report")).then(canvas => { // 获取需要截图的区域
let contentWidth = canvas.width;
let contentHeight = canvas.height;
let pageHeight = contentWidth / 592.28 * 841.89;
let leftHeight = contentHeight;
let position = 0;
let imgWidth = 595.28;
let imgHeight = 592.28 / contentWidth * contentHeight;
let pageData = canvas.toDataURL('image/jpeg', 1.0);
let 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('报表_' + new Date().getTime() + '.pdf');
})