1霸饲、下載npm包
npm i html2canvas jspdf -s
2名挥、頁面引入
?? ??import html2canvas from 'html2canvas';
? ? ? import jsPDF from 'jspdf';
3乙嘀、頁面加載完成時調(diào)用函數(shù)
?// 生成pdf
? const getPdf = () => {
? ? html2canvas(document.getElementById(`canvas`), {
? ? ? scale: 2, // 提升畫面質(zhì)量，但是會增加文件大小
? ? }).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');
? ? ? //有兩個高度需要區(qū)分雕拼，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)
? ? ? //當內(nèi)容未超過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`);
? ? });
? };
