JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>

<button onClick="printToPDF();">
  Print to PDF
</button>

<p>This section is not for printing</p>

<div id="printable">
  <h3>This section is for printing...</h3>
  <img src="https://drive.google.com/uc?id=1i85nT5zFO-X2VB29wobGlmt7wxXyhLYK">
  <br>
  <img src="https://upload.wikimedia.org/wikipedia/en/0/0c/Garfield-comparison.png">
  <br>
  <img src="https://upload.wikimedia.org/wikipedia/en/0/0c/Garfield-comparison.png">
  <br>
  <img src="https://upload.wikimedia.org/wikipedia/en/0/0c/Garfield-comparison.png">
  <br>
  <img src="https://upload.wikimedia.org/wikipedia/en/0/0c/Garfield-comparison.png">
  <br>
  <img src="https://upload.wikimedia.org/wikipedia/en/0/0c/Garfield-comparison.png">
  <br>
  <h3>...End of the printable area</h3>
</div>
<p>This section is not for printing</p>

JavaScript

function printToPDF() {
  console.log('converting...');

  var printableArea = document.getElementById('printable');

  html2canvas(printableArea, {
    useCORS: true,
    onrendered: function(canvas) {

      var pdf = new jsPDF('p', 'pt', 'letter');

      var pageHeight = 980;
      var pageWidth = 900;
      for (var i = 0; i <= printableArea.clientHeight / pageHeight; i++) {
        var srcImg = canvas;
        var sX = 0;
        var sY = pageHeight * i; // start 1 pageHeight down for every new page
        var sWidth = pageWidth;
        var sHeight = pageHeight;
        var dX = 0;
        var dY = 0;
        var dWidth = pageWidth;
        var dHeight = pageHeight;

        window.onePageCanvas = document.createElement("canvas");
        onePageCanvas.setAttribute('width', pageWidth);
        onePageCanvas.setAttribute('height', pageHeight);
        var ctx = onePageCanvas.getContext('2d');
        ctx.drawImage(srcImg, sX, sY, sWidth, sHeight, dX, dY, dWidth, dHeight);

        var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);
        var width = onePageCanvas.width;
        var height = onePageCanvas.clientHeight;

        if (i > 0) // if we're on anything other than the first page, add another page
          pdf.addPage(612, 791); // 8.5" x 11" in pts (inches*72)

        pdf.setPage(i + 1); // now we declare that we're working on that page
        pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width * .62), (height * .62)); // add content to the page

      }
      pdf.save('test.pdf');
    }
  });
}