将长的 HTML 导入并分割成 PDF。

Question

我的场景是：

点击一个按钮，将HTML页面中的数据导入到PDF文件中。

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

当数据太大时，PDF必须被拆分以容纳所有数据，为此，我使用了这里的代码：https://github.com/MrRio/jsPDF/pull/397

我的问题是：在Firefox上，PDF中第2页或第3页分割的页面无法显示，它们完全是空白的。但在第1页上它是正常的。(这是针对Firefox的)

我测试了其他浏览器，它们都很好。请问有人能提供一些解决方法吗？

这是我的plnkr链接：http://plnkr.co/edit/ElvAsriK2nssq2U9pgKX?p=preview

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');
    };
}

- drizzt83s

---

你找到解决方案了吗？如果是的话，请发布同样的内容。 - Roy M J

@RoyMJ 使用图像转PDF会导致低质量的PDF，相反你可以使用autoTable for jsPdf，并带有页眉和页脚导出内容。在这里查看 https://simonbengtsson.github.io/jsPDF-AutoTable/#header-footer它还将生成高质量的PDF输出。 - Purushoth

@Purushoth：感谢您提供的链接，但我要导入的不是表格，而是一段冗长的HTML代码。目前市面上的插件在处理这种冗长内容时似乎存在问题。 - Roy M J

这是Firefox内置阅读器的问题。您需要转到“选项->应用程序”，并更改PDF文件或便携式文档格式设置为在Firefox中使用Adobe Acrobat。希望这能有所帮助。 - mico

Answer 1

你应该使用canvas-to-blob和FileSaver.js，并修改这一行：

pdf.save('test.pdf');

转换为：

var data = pdf.output();
var buffer = new ArrayBuffer(data.length);
var array = new Uint8Array(buffer);
for (var i = 0; i < data.length; i++) {
    array[i] = data.charCodeAt(i);
}

var blob = new Blob(
    [array],
    {type: 'application/pdf', encoding: 'raw'}
);
saveAs(blob, "test.pdf");

你可以在这里查看。

我在Mac上使用Firefox时成功了。

我在这里找到了解决方案。

- Adam

---

还有，你有任何办法如何设置四个边距吗？ - TechTurtle