. Advertisement .
..3..
. Advertisement .
..4..
PDF file format in Javascript is always useful as it allows users to download a big bulk of data in the web application. You can use PDF files to get dynamic content for later offline uses.
HTML is a prime example. You can convert HTML to PDF file with the export to PDF capability. This tutorial will discuss some common and easy-to-follow methods to perform this conversion.
How To Convert HTML To PDF Javascript
Method 1: Use The jsPDF Library
Using the jsPDF library is the most straightforward conversion method. This library also provides users with a wide range of options and techniques for customizing different PDF generation.
There is no need to download it separately. Instead, make sure that your source code package includes the required files. Before converting the file, let’s activate the jsPDF library with the code as follows:
<!-- jsPDF library -->
<script src="js/jsPDF/dist/jspdf.min.js"></script>
Then, load and initiate the class and use the Javascript object:
var doc = new jsPDF();
Now it’s time to use the text()
method to specify the content. If you want to add a new PDF page, the addPage()
option will be handy. After generating and converting, use the save()
method to download the result:
var doc = new jsPDF();
doc.text(20, 20, 'Hello');
doc.text(20, 30, 'This is client-side Javascript to generate a PDF.');
// Add new page
doc.addPage();
doc.text(20, 20, 'Visit ITtutoria.net');
// Save the PDF
doc.save('document.pdf');
Now that you have generated PDF successfully, let’s convert HTML to this new file format. All you need to do is get the content from the ID or class specific element. Wait for a few seconds for the process to complete and download the content as a PDF file:
<div id="content">
<!-- HTML content goes here -->
</div>
<div id="elementH"></div>
Javascript:
var source = window.document.getElementsByTagName("body")[0];
var specialElementHandlers = {
'#hidden-element': function (element, renderer) {
return true;
}
};
var doc = new jsPDF({
orientation: 'landscape'
});
doc.setFont("courier");
doc.setFontType("normal");
doc.setFontSize(24);
doc.setTextColor(100);
doc.fromHTML(elementHTML, 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
The paper’s orientation is set by the orientation property. Besides, use the setFont()
and setFontType()
options to modify your desired font and style of the text.
Font color and size can also be fixed by the setTextColor()
and setFrontSize()
.
Method 2: Use A Window Object
This method requires you to create a new window object. This way, you can get an associated document and export the HTML file as a PDF.
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#btnPrint").live("click", function () {
var divContents = $("#text").html();
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>Convert HTML To PDF in Javascript</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(text);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});
</script>
</head>
<body>
<form id="form1">
<div id="text">
Convert this text to PDF.
</div>
<input type="button" value="Print Contents" id="btnPrint" />
</form>
</body>
</html>
In the above code, the window.open()
function opens a document with the pre-set dimensions while the text in this document is written by the document.write()
function.
Conclusion
This post has introduced you to two methods to convert HTML to PDF in Javascript. This conversion is very useful to allow you to save a large amount of big data into a compact PDF file.
Leave a comment