+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html)
+--- Thread: [Tut] jsPDF HTML Example with html2canvas for Multiple Pages PDF (/thread-100374.html)
[Tut] jsPDF HTML Example with html2canvas for Multiple Pages PDF - xSicKxBot - 12-09-2022
jsPDF HTML Example with html2canvas for Multiple Pages PDF
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/12/jspdf-html-example-with-html2canvas-for-multiple-pages-pdf.jpg" width="550" height="561" title="" alt="" /></div><div><div class="modified-on" readability="7.1304347826087"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on December 9th, 2022.</div>
<p>The jsPDF with html2canvas library is one of the best choices which gives the best output PDF from HTML.</p>
<p>You need to understand the dependent libraries to get better out of it. Effort-wise it is easier to create a PDF from HTML.</p>
<p>Before getting into the theory part, I want to give the solution directly to save your time :-). Then, I will highlight the area to strengthen the basics of jsPDF and html2canvas.</p>
<h2>Quick solution</h2>
<div class="post-section-highlight" readability="48">
<pre class="prettyprint"><code class="language-javascript">window.jsPDF = window.jspdf.jsPDF;
function generatePdf() { let jsPdf = new jsPDF('p', 'pt', 'letter'); var htmlElement = document.getElementById('doc-target'); // you need to load html2canvas (and dompurify if you pass a string to html) const opt = { callback: function (jsPdf) { jsPdf.save("Test.pdf"); // to open the generated PDF in browser window // window.open(jsPdf.output('bloburl')); }, margin: [72, 72, 72, 72], autoPaging: 'text', html2canvas: { allowTaint: true, dpi: 300, letterRendering: true, logging: false, scale: .8 } }; jsPdf.html(htmlElement, opt);
}
</code></pre>
</div>
<p><a class="demo" href="https://phppot.com/demo/jspdf-html-example/">View Demo</a></p>
<p><img loading="lazy" class="alignnone size-large wp-image-20162" src="https://phppot.com/wp-content/uploads/2022/12/jspdf-html-example-550x561.jpg" alt="jspdf html example" width="550" height="561" srcset="https://phppot.com/wp-content/uploads/2022/12/jspdf-html-example-550x561.jpg 550w, https://phppot.com/wp-content/uploads/2022/12/jspdf-html-example-294x300.jpg 294w, https://phppot.com/wp-content/uploads/2022/12/jspdf-html-example-768x783.jpg 768w, https://phppot.com/wp-content/uploads/2022/12/jspdf-html-example.jpg 1000w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>Steps to create the HTML example of generating a Multi-page PDF</h2>
<p>This JavaScript imports the jsPDF and loads the html2canvas libraries. This example approaches the implementation with the following three steps.</p>
<ol>
<li>It gets the HTML content.</li>
<li>It sets the html2canvas and jsPDF options of PDF display properties.</li>
<li>It calls the jsPDF .html() function and thereby invokes a callback to output the PDF.</li>
</ol>
<p>In a previous code, we have seen some <a href="https://phppot.com/javascript/html-to-pdf-in-javascript-using-jspdf/">small examples of converting HTML to PDF using the jsPDF</a> library.</p>
<h2>HTML code for Multi-page PDF content</h2>
<p>This example HTML has the content target styled with internal CSS properties. These styles are for setting fonts, and spacing while converting this HTML to PDF.</p>
<p>The <em>#doc-target</em> is the PDF’s content target in this HTML. But, the <em>#outer</em> is the outer container to take care of the UI perception.</p>
<p>That means the PDF will reflect the styles from the <em>#doc-target</em> level of the HTML DOM. The <em>#outer</em> is for synchronizing the UI preview and the PDF result for the sake of the perception.</p>
<p>If you want to show a preview before PDF generation, there is an example for it before <a href="https://phppot.com/javascript/pdf-in-javascript-html-invoice-example/">generating an invoice PDF</a>.</p>
<p>These styles are</p>
<pre class="prettyprint"><code class="language-html"><HTML>
<HEAD> <TITLE>jsPDF HTML Example with html2canvas for Multiple Pages PDF</TITLE> <style> #doc-target { font-family: sans-serif; -webkit-font-smoothing: antialiased; color: #000; line-height: 1.6em; margin: 0 auto; } #outer { padding: 72pt 72pt 72pt 72pt; border: 1px solid #000; margin: 0 auto; width: 550px; } </style>
</HEAD>
<BODY> <div id="container"> <p> <button class="btn" onclick="generatePdf()">Download PDF</button> </p> <div id="outer"> <div id="doc-target"> <h1>jsPDF HTML Example</h1> <div id="lipsum"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempor purus a congue ullamcorper. Nunc vulputate eros nunc, sed molestie orci interdum ut. Mauris non tristique neque, ut tincidunt lectus. Nunc sollicitudin eros sapien. Donec metus ex, vestibulum vel pharetra in, convallis id diam. Sed eu tellus pulvinar, fringilla est ut, feugiat nibh. Etiam eget commodo risus. Proin faucibus elementum enim, ut hendrerit nisi convallis at. Pellentesque volutpat, purus faucibus varius tincidunt, nulla erat convallis lacus, eu accumsan felis mauris eget velit. Vestibulum a neque purus. Vestibulum in ultricies justo. Fusce dapibus, sapien a mollis luctus, risus dolor hendrerit ex, in semper justo enim sed ante. Morbi ut urna et velit finibus vehicula. Vivamus elementum egestas ultrices. Proin rutrum orci odio, sit amet hendrerit diam vulputate a. </p> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</BODY>
</HTML>
</code></pre>
<h2>JavaScript jsPDF options for getting a multi-page PDF</h2>
<p>In this example code, the JavaScript jsPDF code sets some options or properties. These are required for the below purposes</p>
<ul>
<li>It sets the PDF content’s display properties</li>
<li>It defines the callback function to save or open the output PDF.</li>
</ul>
<p>The below list has a short description of each option and its properties used in this example.</p>
<ul>
<li><em>callback</em> – It is a client-side method that is invoked when the output PDF is ready.</li>
<li><em>margin</em> – It is the jsPDF option to specify the top, right, bottom and left margins of the PDF.</li>
<li>autoPaging – It is required when creating a multi-page PDF from HTML with the auto page break.</li>
<li><em>html2canvas</em> – The jsPDF depends on html2canvas library. Knowing how to use these properties will help to get a satisfactory PDF output.
<ul>
<li><em>allowTaint</em> – It allows the cross-origin images to taint the canvas if it is set as <em>true</em>. The default is <em>false</em>.</li>
<li><em>dpi</em> – It is <em>dots per inch</em>. Giving 300 will be good which is a printing quality.</li>
<li><em>letterRendering</em> – It allows rendering the letter properly with specified or supported fonts.</li>
<li><em>logging</em> – It writes a log to the developer’s console while creating a PDF. The default is <em>true</em>, but this example disables it.</li>
<li><em>scale</em> – Without specifying this option, it takes the browser’s device pixel ratio.</li>
</ul>
</li>
</ul>
<h2>More references for the available options of creating a full-fledged jsPDF example</h2>
<p>These are the library documentation links that guide to creating PDFs from HTML.</p>
<ol>
<li><a href="https://artskydj.github.io/jsPDF/docs/jsPDF.html">jsPDF core inbuilt</a></li>
<li><a href="https://rawgit.com/MrRio/jsPDF/master/docs/module-html.html#~html" target="_blank" rel="noopener">jsPDF html.js plugin</a></li>
<li><a href="https://html2canvas.hertzen.com/configuration" target="_blank" rel="noopener">Options – html2canvas</a></li>
</ol>
<p>The jsPDF core alone has many features to create PDF documents on the client side. But, for converting HTML to a multi-page PDF document, the core jsPDF library is enough.</p>
<p>The latest version replaces the <em>fromHTML</em> plugin with the <em>html.js</em> plugin to convert HTML to PDF.</p>
<p>Above all the jsPDF depends on html2canvas for generating a PDF document. It hooks the html2canvas by supplying enough properties for creating a PDF document.</p>
<p>We used the html2canvas library to <a href="https://phppot.com/javascript/capture-screenshot-javascript/">capture a screenshot of a webpage</a>. It is a reputed and dependable library to generate and render canvas elements from HTML.</p>
<p><a class="demo" href="https://phppot.com/demo/jspdf-html-example/">View Demo</a><a class="download" href="https://phppot.com/downloads/javascript/jspdf-html-example.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/jspdf-html-example/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/12/08/jspdf-html-example-with-html2canvas-for-multiple-pages-pdf/