{"id":4549,"date":"2023-10-31T13:38:49","date_gmt":"2023-10-31T13:38:49","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=4549"},"modified":"2023-10-31T14:27:25","modified_gmt":"2023-10-31T14:27:25","slug":"generate-multipage-pdf-from-single-canvas-of-html","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/wordpress\/pdf\/jspdf\/generate-multipage-pdf-from-single-canvas-of-html","title":{"rendered":"Generate Multipage PDF from Single Canvas of HTML"},"content":{"rendered":"\n

This is based on the example detailed here: https:\/\/www.freakyjolly.com\/multipage-canvas-pdf-using-jspdf\/<\/a><\/p>\n\n\n\n

Its OK for some uses, but its an image-based output, so if your HTML is full of text, that text gets converted to an image grab before being added to the pdf and will get sliced for page joins anywhere, including in the middle of a line of text. <\/p>\n\n\n\n

Include in your header<\/h5>\n\n\n\n
    <script type=\"text\/javascript\" src=\"\/wp-content\/themes\/hello-theme-child-master\/odac-libaries\/canvasjs\/canvasjs.min.js\"><\/script>\n    <script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/1.3.3\/jspdf.min.js\"><\/script>   <!--Include for export to pdf-->\n    <script src=\"https:\/\/html2canvas.hertzen.com\/dist\/html2canvas.js\"><\/script><\/code><\/pre>\n\n\n\n
Export button<\/h5>\n\n\n\n
  <button id=\"exportButton\" type=\"button\">Export as PDF<\/button><\/code><\/pre>\n\n\n\n
Div containing all that you want to export<\/h5>\n\n\n\n
  <div class=\"canvas_div_pdf\">\n\n    <h4>Your content here...<\/h4>\n\n  <\/div> <!-- <div class=\"canvas_div_pdf\"> -->\n<\/code><\/pre>\n\n\n\n
Javascript code to do the export when the button is clicked<\/h5>\n\n\n\n
    <script type=\"text\/javascript\">\n      jQuery(\"#exportButton\").click(function()\n      {\n\n        var HTML_Width = jQuery(\".canvas_div_pdf\").width();\n        var HTML_Height = jQuery(\".canvas_div_pdf\").height();\n        var top_left_margin = 15;\n        var PDF_Width = HTML_Width+(top_left_margin*2);\n        var PDF_Height = (PDF_Width*1.5)+(top_left_margin*2);\n        var canvas_image_width = HTML_Width;\n        var canvas_image_height = HTML_Height;\n\n        var totalPDFPages = Math.ceil(HTML_Height\/PDF_Height)-1;\n\n        html2canvas(jQuery(\".canvas_div_pdf\")[0],{allowTaint:true}).then(function(canvas) {\n          canvas.getContext('2d');\n\n          console.log(canvas.height+\"  \"+canvas.width);\n\n\n          var imgData = canvas.toDataURL(\"image\/jpeg\", 1.0);\n          var pdf = new jsPDF('p', 'pt',  [PDF_Width, PDF_Height]);\n            pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin,canvas_image_width,canvas_image_height);\n\n\n          for (var i = 1; i <= totalPDFPages; i++) { \n            pdf.addPage(PDF_Width, PDF_Height);\n            pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);\n          }\n\n            pdf.save(\"HTML-Document.pdf\");\n            });\n\n      });\n    <\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
This is based on the example detailed here: https:\/\/www.freakyjolly.com\/multipage-canvas-pdf-using-jspdf\/ Its OK for some uses, but its an image-based output, so if your HTML is full of text, that text gets converted to an image grab before being added to the pdf and will get sliced for page joins anywhere, including in the middle of a […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[355],"tags":[],"class_list":["post-4549","post","type-post","status-publish","format-standard","hentry","category-jspdf"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=4549"}],"version-history":[{"count":4,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4549\/revisions"}],"predecessor-version":[{"id":4558,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4549\/revisions\/4558"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=4549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=4549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=4549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}