<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.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 class="btn" id="btn" onClick="printToPDF();"> Export to PDF </button> <div id="page">content</div> <script> function printToPDF() { btn.innerText = "Converting..."; console.log('Converting...'); var printableArea = document.getElementById('page'); html2canvas(printableArea, { useCORS: true, onrendered: function(canvas) { var pdf = new jsPDF('a', 'pt', 'a4'); var pageHeight = 1200; var pageWidth = 1000; 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 } var today = new Date(); var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate(); pdf.save(date+'.pdf'); btn.innerText = " Export to PDF"; } }); } </script>