admin管理员组文章数量:1567736
使用jspdf+html2canvas的一些采坑
本文代码是基于jq+jspdf+html2canvas写的,要实现将html文档下载成pdf,中间遇到的问题有:1、文件下载后如果没有置顶的话html2canvas会生成出黑屏。2、代码中有大片生成的echars图表,这种只能在原有的dom节点上生成canvas,进行下载,无法cloneNode()一个节点去进行操作。3、html2canvas生成图片时如果不对html2canvas进行配置可以显示图片的话,图片显示不出来。4、页面中有大量的图表(超过浏览器canvas绘制元素最大高度),剩余部分会显示显示黑屏,解决办法是超过部分再次生成canvas,并加到要生成的pdf对象中。
附代码
var reportBody; //转化为pdf的部分
reportBody = $("#reportBody");
function f_uploadPdf() {
handleHtml2Down(data.reportName);
}
//生成pdf
handleHtml2Down = async (fileName) => {
var pdf = new jsPDF('p', 'pt', 'a4');
scrollTo(0, 0);
const maxH = 16384
let h = reportBody[0].scrollHeight
var index = 0
var pdfDom = $("#pdfDom")[0];
while (h > 0) {
await html2canvas(pdfDom, {
background: "#fff",
height: (h > maxH ? maxH : h),
width: pdfDom.scrollWidth,
foreignObjectRendering: true,
allowTaint: false,
useCORS: true,
}).then((canvas => {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 592.28 / contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1);
//有两个高度需要区分,一个是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();
}
}
}
h = h - maxH;
index++;
pdfDom.style.height = h;
reportBody[0].style.marginTop = `-${index * maxH}px`
}))
}
reportBody[0].style.marginTop = '0px'
pdf.save(fileName+".pdf");
}
代码实现中参考了大量文档,感谢大佬们的支持!加上了reportBody的注释,这个项目其余代码很多,项目较老,下载pdf的核心代码就是这些,其余获取echars图数据代码就不贴了。
本文标签: 高度浏览器jspdfhtml2canvas
版权声明:本文标题:jspdf+html2canvas各种踩坑(包括超过浏览器限制高度下载) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1726624297a1078593.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论