HTML to PDF Convert Using JavaScript
PDF file format is very Important to download body of data in web application.
jsPDF is one of the most and best library to convert your HTML to PDF using JS. In here , we will show you how to generate PDF document and also convert HTML to PDF using jQuery and jsPDF library.
Include the jQuery and jsPDF library files to use the jsPDF class.
<script src="js/jquery.min.js"></script>
<!-- jsPDF library -->
<script src="js/jsPDF/dist/jspdf.min.js"></script>
CDN :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
But best think is. You do not need to download jspdf file or library. It’s all include when you connect with jspdf.min.js
Add jspdf class
var doc = new jsPDF();
Now Generate PDF using JavaScript
The following example shows how to use the jsPDF.
Specify the content in text() method of jsPDF object.
Use the addPage() method to add new page to PDF.
Use the save() method to generate and download PDF file.
var pdf = new jsPDF();
pdf.text(20, 20, 'Hello world!');
pdf.text(20, 30, 'Let’s show the pdf, generated via jspdf library !');
// Add new page
pdf.addPage();
pdf.text(20, 20, 'Go to Browse: ngs-it.com');
// Save the PDF
pdf.save('testpdf.pdf');
Now Convert HTML Content
Retrieve the HTML content from the specific element by ID or class.
Convert HTML content of the specific part of the web page and generate PDF.
Save and download the HTML content as a PDF file.
<div id="content">
<!-- Here HTML content goes-->
</div>
<div id="content">
--------
</div>
JavaScript Code:
var pdf = new jsPDF();
var elementHTML = $('#content').html();
var specialElementHandlers = {
'#elementH': function (element, renderer) {
return true;
}
};
pdf.fromHTML(elementHTML, 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
// Save the PDF
doc.save('sample-example.pdf');
Some Useful Configurations
The jsPDF library provides Some methods and options to configure the PDF creation. Some of the useful methods of jsPDF class are given below that are commonly used to export HTML to PDF using jQuery.
Change Paper Orientation:
Use the orientation option to set the paper orientation of the PDF.
var pdf = new jsPDF({
orientation: 'landscape'
});
pdf.text(20, 20, 'Hello world!');
pdf.text(20, 30, 'This is client-side JS to generate a PDF.');
// Add new page
pdf.addPage();
pdf.text(20, 20, 'Visit ngs-it.com');
// Save the PDF
pdf.save('example.pdf');
Change Text Font:
Use setFont() and setFontType() methods to set text font and font-style in the PDF.
var pdf = new jsPDF();
pdf.text(20, 20, 'This is the default font.');
pdf.setFont("courier");
pdf.setFontType("normal");
pdf.text(20, 30, 'This is courier normal.');
pdf.setFont("times");
pdf.setFontType("italic");
pdf.text(20, 40, 'This is times italic.');
pdf.setFont("helvetica");
pdf.setFontType("bold");
pdf.text(20, 50, 'This is helvetica bold.');
pdf.setFont("courier");
pdf.setFontType("bolditalic");
pdf.text(20, 60, 'This is courier bolditalic.');
// Save the PDF
pdf.save(example.pdf');
Change Font Size:
Use setFontSize() method to set font size.
var pdf = new jsPDF();
pdf.setFontSize(24);
pdf.text(20, 20, 'Title is here !');
pdf.setFontSize(16);
pdf.text(20, 30, 'Normal Size Text Paragraph !');
// Save the PDF
pdf.save(example.pdf');
Change Text Color:
Use setTextColor() method to change text color. Example is
var pdf= new jsPDF();
pdf.setTextColor(100);
pdf.text(20, 20, 'This is gray.');
pdf.setTextColor(150);
pdf.text(20, 30, 'This is light gray.');
pdf.setTextColor(255,0,0);
pdf.text(20, 40, 'This is red.');
pdf.setTextColor(0,255,0);
pdf.text(20, 50, 'This is green.');
pdf.setTextColor(0,0,255);
pdf.text(20, 60, 'This is blue.');
// Save the PDF
pdf.save(example.pdf');
