最近在做项目,需求是把网页转成pdf并导出,我使用的是html2canvas.js和jsPDF.js来实现的。
现在问题在于,如果页面比较少导出的图片是正常的,随之PDF就是正常的。但是
如果页面比较长,导出的图片就是黑色的,PDF也是黑色的,请问哪位大神能帮我解
决一下这个问题,下面是代码:
var pdfContainer = document.getElementById("month_smoke_control" + month_smoke_control_vue.smoke_winds[0].id);
html2canvas(pdfContainer, {
onrendered:function(canvas) {
loadPdf(canvas);
savePdf();
}
})
function loadPdf(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = parseInt(contentWidth / 595.28 * 841.89);
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//pdf页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 555.28;
var imgHeight = 555.28/contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
//console.log(pageData);
//var pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight );
if(addFlag){
pdf.addPage();
}
} else {
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//pdf.addPage();
//避免添加空白页
//pdf.addPage();
if(leftHeight > 0) {
pdf.addPage();
}
}
}
}
function savePdf(){
pdf.save(build_name +"第" + week_num + title_return +"防烟排烟-"+smoke_type+"检测任务报告.pdf");
$("body").css("overflow", "visible");
document.getElementById("month_smoke_control_pdf").style.display = "";
document.getElementById("month_smoke_control_loading_bg").style.display = "none";
$(".month_smoke_control_page").css('display', '');
}
上面代码中,如果页面过长,html2canvas中生成的图片就是黑色,页面背景我都设置成白色了,但是也没用,还请诸位帮忙解决一下。