The PDF file format is highly useful for downloading large amounts of data from a web service. It allows users to download dynamic material as a file for offline use. The HTML content is transformed to a PDF document and downloaded as a PDF file using the export to PDF functionality. A server-side script is utilised in the dynamic web application to convert HTML to PDF and generate PDF files using PHP.

If you need a client-side solution to convert HTML to PDF, JavaScript is the most convenient option. For creating PDF from HTML, a variety of JavaScript libraries are available. jsPDF is one of the best JavaScript libraries for converting HTML to PDF. We’ll show you how to use jQuery and the jsPDF library to create PDF documents and convert HTML to PDF in this tutorial.

jQuery and the jsPDF Library should be used.

To utilise the jsPDF class, include the jQuery and jsPDF library files.

<!-- jQuery library -->
<script src="js/jquery.min.js"></script>
<!-- jsPDF library -->
<script src="js/jsPDF/dist/jspdf.min.js"></script>

It’s important to note that you don’t need to download the jsPDF library individually; all of the files you’ll need are included in our source code bundle.

Create a new instance of the jsPDF Class.
In JavaScript, use the following line of code to create and use the jsPDF object.

var doc = new jsPDF();

Using JavaScript, create a PDF.

The following example demonstrates how to use JavaScript to generate a PDF file using the jsPDF module.

In the text() method of the jsPDF object, specify the content.
To add a new page to a PDF, use the addPage() method.
To create and download a PDF file, use the save() method.

var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript to generate a PDF.');
// Add new page
doc.addPage();
doc.text(20, 20, 'Visit CodexWorld.com');
// Save the PDF
doc.save('document.pdf');

JavaScript is used to convert HTML content to PDF.

The following example explains how to use JavaScript and the jsPDF library to convert HTML to PDF and create PDF files from HTML content.

By using the ID or class, you can get the HTML content from a specific element.
Convert the HTML content of a specific section of a web page to PDF.
As a PDF file, save and download the HTML text.

Code in HTML:

<div id="content">
<!-- HTML contnet goes here -->
</div>
<div id="elementH"></div>

Code in JavaScript:

var doc = new jsPDF();
var elementHTML = $('#contnet').html();
var specialElementHandlers = {
'#elementH': function (element, renderer) {
return true;
}
};
doc.fromHTML(elementHTML, 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
// Save the PDF
doc.save('sample-document.pdf');

Configurations That Are Beneficial

The jsPDF library offers a number of techniques and options for customising PDF production. The following are some of the helpful methods of the jsPDF class that are widely used to export HTML to PDF using jQuery.

Change the PDF’s Paper Orientation: Use the orientation option to change the PDF’s paper orientation.

var doc = new jsPDF({
orientation: 'landscape'
});
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript to generate a PDF.');
// Add new page
doc.addPage();
doc.text(20, 20, 'Visit CodexWorld.com');
// Save the PDF
doc.save('document.pdf');

Set the text font and font-style in the PDF using the setFont() and setFontType() functions.

var doc = new jsPDF();
doc.text(20, 20, 'This is the default font.');
doc.setFont("courier");
doc.setFontType("normal");
doc.text(20, 30, 'This is courier normal.');
doc.setFont("times");
doc.setFontType("italic");
doc.text(20, 40, 'This is times italic.');
doc.setFont("helvetica");
doc.setFontType("bold");
doc.text(20, 50, 'This is helvetica bold.');
doc.setFont("courier");
doc.setFontType("bolditalic");
doc.text(20, 60, 'This is courier bolditalic.');
// Save the PDF
doc.save('document.pdf');

Change the font size of the text in the PDF using the setFontSize() method.

var doc = new jsPDF();
doc.setFontSize(24);
doc.text(20, 20, 'This is a title');
doc.setFontSize(16);
doc.text(20, 30, 'This is some normal sized text underneath.');
// Save the PDF
doc.save('document.pdf');

Change the colour of the text in the PDF by calling the setTextColor() function.

var doc = new jsPDF();
doc.setTextColor(100);
doc.text(20, 20, 'This is gray.');
doc.setTextColor(150);
doc.text(20, 30, 'This is light gray.');
doc.setTextColor(255,0,0);
doc.text(20, 40, 'This is red.');
doc.setTextColor(0,255,0);
doc.text(20, 50, 'This is green.');
doc.setTextColor(0,0,255);
doc.text(20, 60, 'This is blue.');
// Save the PDF
doc.save('document.pdf');

Note : 

Our JavaScript sample code demonstrates how to convert HTML to PDF and create a PDF file. Without relying on a server-side script, you can quickly add the Export to PDF capability to a web page. jsPDF configuration options can be used to extend the PDF generating capabilities to meet your specific demands. To receive all of the essential files, including the jsPDF JavaScript library, download our source code bundle.