html长图转换成pdf,将长 html 导入拆分 PDF

我的情况是：

单击按钮时，将 html 上的数据导入 PDF 文件。

由于此 PDF 必须具有一些复杂的必需样式，因此我的第一步是使用 html2canvas.js 将此页面转换为图像，然后使用 jsPDF.js 将此图像导入 PDF

当数据太大时，必须拆分 PDF 以保存所有数据，这样做，所以我在这里使用了代码：https://github.com/MrRio/jsPDF/pull/397

我的问题是：在 firefox 上显示第 2 页的 PDF 或 3...cannot 上的分割页面，它们完全是空白的。但在第 1 页它很好。 (这是为 firefox)

我测试了其他浏览器它们都很好。有人可以说明如何解决这个问题吗？

function initTemplate(){

datas=getData();

var templateData=_.template($('#tpl').html(), datas);

$('#tplW').html(templateData);

getPDF();

// $('#tplW').append(_.template($('#tpl').html(), datas));

// $('body').html( _.template($('#tpl').html(), datas));

}

function getData(){

var htmlData=$(".MsoNormalTable .inner").find("tr.tablerow");

var datas=[];

$.each(htmlData,function(i,v){

var d=[];

var tds=$(v).find("td");

$.each(tds,function(index,val){

d.push($(val).text());

});

datas.push(d);

});

return datas;

}

function getPDF() {

// initTemplate();

html2canvas($('#tplW')[0], {

onrendered: function(canvas){

canvasToImageSuccess(canvas);

}

});

function canvasToImage (canvas){

var img = new Image();

var dataURL = canvas.toDataURL('image/png');

img.src = dataURL;

return img;

};

function canvasShiftImage (oldCanvas,shiftAmt){

shiftAmt = parseInt(shiftAmt) || 0;

if(!shiftAmt){ return oldCanvas; }

var newCanvas = document.createElement('canvas');

newCanvas.height = oldCanvas.height - shiftAmt;

newCanvas.width = oldCanvas.width;

var ctx = newCanvas.getContext('2d');

var img = canvasToImage(oldCanvas);

ctx.drawImage(img,0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height);

return newCanvas;

};

function canvasToImageSuccess (canvas){

var pdf = new jsPDF('l','px'),

pdfInternals = pdf.internal,

pdfPageSize = pdfInternals.pageSize,

pdfScaleFactor = pdfInternals.scaleFactor,

pdfPageWidth = pdfPageSize.width,

pdfPageHeight = pdfPageSize.height,

totalPdfHeight = 0,

htmlPageHeight = canvas.height,

htmlScaleFactor = canvas.width / (pdfPageWidth * pdfScaleFactor),

safetyNet = 0;

while(totalPdfHeight < htmlPageHeight && safetyNet < 15){

var newCanvas = canvasShiftImage(canvas, totalPdfHeight);

pdf.addImage(newCanvas, 'png', 0, 0, pdfPageWidth, 0, null, 'NONE');

totalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor);

if(totalPdfHeight < htmlPageHeight){

pdf.addPage();

}

safetyNet++;

}

pdf.save('test.pdf');

};

}