电视遥控器设计 Generating PDF File using JavaScript and JSPDF Library Tutorial

In this tutorial, you will learn how to Generate or Create a PDF File for your web applications on the client side using JaScript and JSPDF Library. The tutorial aims to provide IT/CS students and new web developers with a reference for learning how to generate PDF files using JaScript. Here, simple snippets that demonstrate the goal of this tutorial are provided. A sample and working source code zip file is also provided and is free to download.

Why implement a PDF Generation in web applications?

Developers implement a PDF Generation Feature in web applications to achieve the requirement of the system that they are building. It is one of the common features that end-users asked or look for in a web application, especially when exporting some information or reports from the system.

How to generate PDF Files using JaScript?

There are lots of JS Libraries that are ailable online that were built for Generating PDF Files in web applications. One of these libraries is the JSPDF Library. JSPDF Library is a free JS library for generating PDFs. See the Installation process of the JSPDF Library on Github.

Demo Snippets

Here are some sample snippets for using the JSPDF Library.

Simple Generating PDF

The following snippet demonstrates how to generate a PDF File. The script explains how to add content on a PDF per line or paragraph. The snippet loads the Bootstrap Framework using CDNs which requires an Internet connection to display the User Interface properly.

Interface jsPDF Library Demo jsPDF Library - DEMO SourceCodester Simple PDF Content Export to PDF jsPDF Library DEMO I love SourceCodester Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed alias nam nesciunt soluta unde nemo provident vero sit architecto veniam expedita ab, non illum nulla pariatur error magni! Ducimus, facere. I love SourceCodester

Output

JSPDF DEMO Script

JaScript var simple_pdf_btn = document.getElementById('simple_pdf') window.simple_pdf = function(){ var container = document.getElementById('simple_pdf_container') let pdf = new jsPDF(); var p = container.querySelectorAll('p') var line = 10; p.forEach(el => { pdf.text(pdf.splitTextToSize(el.innerText, 180), 10,line); line += 10 }) pdf.se('simple_pdf.pdf') } window.onload = function(){ simple_pdf_btn.addEventListener('click', function(e){ e.preventDefault() simple_pdf() }) }

Output

JSPDF DEMO Script

Converting HTML Elements to PDF

The following snippet demonstrates how to generate a PDF File that from using the HTML Node as the content.

Interface jsPDF Library Demo jsPDF Library - DEMO SourceCodester Exporting HTML Element to PDF Export Element to PDF Exported HTML Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque est odio, lobortis eget pharetra et, commodo non felis. Pellentesque dui dolor, lobortis et blandit vel, commodo nec tellus. Nunc ac metus iaculis, scelerisque quam et, luctus ipsum. Proin euismod nec mi sed venenatis. Suspendisse id nibh ipsum. Sed vestibulum vulputate purus, ac ultricies nulla finibus at. Maecenas vel lacus erat. Nam odio magna, porttitor luctus efficitur ac, auctor sit amet lorem. Etiam ultrices tempus molestie. Sed sagittis nulla nec nibh auctor finibus. Table Header 1 Header 2 Header 3 Column 1 Column 2 Column 3 Column 2.1 Column 2.2 Column 2.3

Output

JSPDF DEMO Script

JaScript var html_pdf_btn = document.getElementById('html_pdf') window.html_pdf = function(){ var container = document.getElementById('html_pdf_container').cloneNode(true) let pdf = new jsPDF('p', 'pt', 'letter'); container.querySelectorAll('table').forEach(el=>{ el.removeAttribute('class') el.style.borderCollapse = 'collapse' el.style.width = '100%' el.querySelectorAll('td, th').forEach(cell=>{ cell.style.border = '1px solid' }) }) console.log(container.innerHTML) pdf.html(`${container.innerHTML}`, { callback: function (pdf) { pdf.se('html_pdf.pdf') }, windowWidth: 100 } ) // pdf.se('html_pdf.pdf') } window.onload = function(){ html_pdf_btn.addEventListener('click', function(e){ e.preventDefault() html_pdf() }) }

Output

JSPDF DEMO Script

To learn more about how to use JSPDF Library, you can visit their documentation site.

I also provided the working source code zip file that I created for this tutorial. You can download it by clicking the Download Button located after this article's content.

That's it! I hope this Generating PDF File using JaScript and JSPDF Library Tutorial helps you with what you are looking for and will be useful for your current and future web applications projects.

Happy Coding :)