兰州酒店网站建设,分销系统,重庆今天重大新闻,4免费网站建站问题描述
前一段时间 实现了html2canvas jspdf.js 导出pdf的功能 项目当时没有测试做完就先搁置 最近项目要上线发现分页时问题 这篇文章记录一下之前的bug
import html2canvas from html2canvas;
import JsPDF from jspdf
export function savePdf(el, title) {html2canva…问题描述
前一段时间 实现了html2canvas jspdf.js 导出pdf的功能 项目当时没有测试做完就先搁置 最近项目要上线发现分页时问题 这篇文章记录一下之前的bug
import html2canvas from html2canvas;
import JsPDF from jspdf
export function savePdf(el, title) {html2canvas(el, {useCORS: true,allowTaint: true,dpi: 192,//导出pdf清晰度scale:2,}).then(async (canvas) {// 新建JsPDF对象const pdf new JsPDF(p, mm, a4);let ctx canvas.getContext(2d),a4w 192, a4h 277, //A4大小210mm x 297mm四边各保留10mm的边距显示区域190x277imgHeight Math.floor(a4h * canvas.width / a4w), //按A4显示比例换算一页图像的像素高度renderedHeight 0;while(renderedHeight canvas.height) {let page document.createElement(canvas);page.width canvas.width;page.height Math.min(imgHeight, canvas.height - renderedHeight);//可能内容不足一页//用getImageData剪裁指定区域并画到前面创建的canvas对象中page.getContext(2d).putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);pdf.addImage(page.toDataURL(image/jpeg, 1.0), JPEG, 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)); //添加图像到页面保留10mm边距renderedHeight imgHeight;if(renderedHeight canvas.height)pdf.addPage();//如果后面还有内容添加一个空页page null}pdf.save(title .pdf);}).catch((e) {console.log(e)}).finally(() {});
} 分页的pdf 就能正常的展示
参考地址: https://www.cnblogs.com/BoyTNT/p/11711439.html
