import html2canvas from "html2canvas"; import jsPDF from "jspdf"; export const downloadPDF = page => { console.log(444); html2canvas(page).then(function(canvas) { canvas2PDF(canvas); }); }; const canvas2PDF = canvas => { let contentWidth = canvas.width; let contentHeight = canvas.height; // 一页pdf显示html页面生成的canvas高度; let pageHeight = contentWidth / 592.28 * 841.89 ; // let pageHeight = 841.89; // 未生成pdf的html页面高度 let leftHeight = contentHeight; // 页面偏移 let position = 0; // html页面生成的canvas在pdf中图片的宽高(本例为:横向a4纸[841.89,592.28],纵向需调换尺寸) let imgWidth = 592.28; let imgHeight = 592.28 / contentWidth * contentHeight; // let imgHeight = 841.89; let pageData = canvas.toDataURL('image/jpeg', 1.0); let PDF = new jsPDF('', 'pt', 'a4'); // 两个高度需要区分: 一个是html页面的实际高度,和生成pdf的页面高度 // 当内容未超过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('测试' + '.pdf') // let contentWidth = canvas.width; // let contentHeight = canvas.height; // console.log(contentWidth,contentHeight); // let imgHeight = contentHeight; // let imgWidth = contentWidth/2; // // 第一个参数: l:横向 p:纵向 // // 第二个参数:测量单位("pt","mm", "cm", "m", "in" or "px") // let pdf = new jsPDF('l', 'pt', 'a4'); // pdf.addImage( // canvas.toDataURL("image/jpeg", 1.0), // "JPEG", // 0, // 0, // imgWidth, // imgHeight // ); // pdf.save("导出.pdf"); };