html转换pdf 分页,(html2canvas jspdf)html转pdf带分页

1、下载npm包

npm i html2canvas jspdf -s

2、页面引入

import html2canvas from 'html2canvas';

import jsPDF from 'jspdf';

3、页面加载完成时调用函数

// 生成pdf

const getPdf = () => {

html2canvas(document.getElementById(`canvas`), {

scale: 2, // 提升画面质量，但是会增加文件大小

}).then(function (canvas) {

const contentWidth = canvas.width;

const contentHeight = canvas.height;

//一页pdf显示html页面生成的canvas高度;

var 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;

const pageData = canvas.toDataURL('image/jpeg', 1.0);

const pdf = new jsPDF('', 'pt', 'a4');

//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)

//当内容未超过pdf一页显示的范围，无需分页

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(`${sessionStorage.getItem('name')}.pdf`);

});

};