JSFiddle - React, Tailwind, and code Playground

by akhil grandhi

HTML

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="https://unpkg.com/html2canvas@1.0.0-rc.5/dist/html2canvas.js"></script>
<div id="printPdf">
  <img crossOrigin="anonymous" src="https://i.imgur.com/dA4t3hw.png" style="height: 100px; width: 100px" />
</div>

JavaScript

function printPdf() {
  const doc = new jsPDF({
    orientation: 'p',
    unit: 'px',
    format: [432, 1056]
  });
  const options = {
    pagesplit: true
  };
  const chart = document.getElementById('printPdf');
  html2canvas(chart, {
    scale: 1.5,
    logging: true,
    useCors: true,
    letterRendering: 1,
    allowTaint: true
  }).then(function(canvas) {
    doc.addImage(canvas.toDataURL('image/png'), 'JPEG', 0, 0, 324, 790);
    if (i < (idForPrintPage - 1)) {
      doc.addPage({
        orientation: 'p',
        unit: 'px',
        format: [432, 1056]
      });
    }
  });
}

setTimeout(printPdf, 1000);