我的情況是：

單擊按鈕時，將 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');

};

}

總結

以上是生活随笔為你收集整理的html长图转换成pdf,将长 html 导入拆分 PDF的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。