Создать несколько страниц PDF-документ jsPDF

Question

В течение некоторого времени я пытаюсь создать PDF-файл с несколькими страницами с помощью jsPDF.

У меня есть 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); 

полный учебник дается здесь http://freakyjolly.com/create-multipage-html-pdf-jspdf-html2canvas/

Answer 2

простой пример использования HTML2PDF плагин:

<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>