創建多頁PDF文件jsPDF

Question

相當長一段時間，我試圖用jsPDF創建一個多頁PDF文件。

我有一個HTML文檔和幾個DIV的

<div id="pdfContainer"> 
    <div id="page1">Content page 1</div> 
    <div id="page2">Content page 2</div> 
    <div id="page3">Content page 3</div> 
    <div id="page4">Content page 4</div> 
</div> 

我html2canvas嘗試過，但更喜歡HTML2PDF （我有html2pdf.js包括在內）。

var doc = new jsPDF(); 
    var elementHandler = { 
     '#page1': function (element, renderer) { 
      return true; 
     }, 
     '#page2': function (element, renderer) { 
      return true; 
     }, 
     '#page3': function (element, renderer) { 
      return true; 
     }, 
     '#page4': function (element, renderer) { 
      return true; 
     } 
    }; 
    var source = window.document.getElementById("pdfcontainer"); 
    doc.fromHTML($('#pdfcontainer').get(0), 15, 15, { 
     'width': 170, 
     'elementHandlers': specialElementHandlers 
    }); 
    doc.output('dataurlnewwindow', {}); 
} 

上面的代碼是我最後一次嘗試，但結果是空的PDF。

我也用

var html = $('#page1').html(); 
    html2pdf(html, pdf, function(pdf) { 
     pdf.output('dataurlnewwindow'); 
    }); 

這是工作，但僅限於第1頁

有沒有一種簡單的方法，使這項工作？還是我的頁面，使PDF頁面

Answer 1

我們可以創建多頁面的PDF，但創造的按類分開在HTML頁面分區

然後我們就可以結合兩種jsPDF和html2canvas爲遵循

var pdf = new jsPDF('p', 'pt', [580, 630]); 

    html2canvas($(".page1")[0], { 
     onrendered: function(canvas) { 
      document.body.appendChild(canvas); 
      var ctx = canvas.getContext('2d'); 
      var imgData = canvas.toDataURL("image/png", 1.0); 
      var width = canvas.width; 
      var height = canvas.clientHeight; 
      pdf.addImage(imgData, 'PNG', 20, 20, (width - 10), (height)); 

     } 
    }); 
    html2canvas($(".page2")[0], { 
     allowTaint: true, 
     onrendered: function(canvas) { 
      var ctx = canvas.getContext('2d'); 
      var imgData = canvas.toDataURL("image/png", 1.0); 
      var htmlH = $(".page2").height() + 100; 
      var width = canvas.width; 
      var height = canvas.clientHeight; 
      pdf.addPage(580, htmlH); 
      pdf.addImage(imgData, 'PNG', 20, 20, (width - 40), (height)); 
     } 
    }); 
    html2canvas($(".page3")[0], { 
     allowTaint: true, 
     onrendered: function(canvas) { 
      var ctx = canvas.getContext('2d'); 
      var imgData = canvas.toDataURL("image/png", 1.0); 
      var htmlH = $(".page2").height() + 100; 
      var width = canvas.width; 
      var height = canvas.clientHeight; 
      pdf.addPage(580, htmlH); 
      pdf.addImage(imgData, 'PNG', 20, 20, (width - 40), (height)); 
     } 
    }); 
    setTimeout(function() { 

     //jsPDF code to save file 
     pdf.save('sample.pdf'); 
    }, 0); 

完全教程使用HTML2PDF插件這裏給出http://freakyjolly.com/create-multipage-html-pdf-jspdf-html2canvas/

Answer 2

一個簡單的例子：

<script> 
    var source = window.document.getElementById("report"); 

    var pdf = new jsPDF('p', 'pt', 'a4'); 
    var canvas = pdf.canvas; 
    canvas.height = 72 * 11; 
    canvas.width = 72 * 8.5; 
    //page break 
    pdf.context2d.pageWrapYEnabled = true; 

    html2pdf(source, pdf, function (pdf) { 
       var iframe = document.createElement('iframe'); 
       iframe.setAttribute('style', 'position:fixed;right:0; top:0; bottom:0; height:100%; width:100%'); 
       document.body.appendChild(iframe); 
       iframe.src = pdf.output('datauristring'); 
      } 
    ); 
</script>