Home
/
Blog
/
How to Generate a PDF with JQuery

How to Generate a PDF with JQuery

Saving web page content is a useful function to be able to integrate into your site and a very common requirement in web development. PDF documents are the easiest and most portable way to save this content. Many people have the misconception that Javascript cannot be used for generating PDFs and that PDFs can only be generated from the server-side; this is not true, and jQuery can allow you to place this power in the hands of your users, by allowing you to create relatively simple code to embed this ability on your site. In this tutorial, we will show you how to generate a PDF with a jQuery PDF generator.

The task of saving content as a PDF file requires the use of some third party JS APIs. In this example, we have used the client-side JSPDF library to generate a PDF. This library is limited to converting only simple HTML code to PDF

Also consider ByteScout: Web API for full-featured HTML to PDF and PDF transformations

If you are looking to convert full-featured HTML with CSS and images from code or URL into rich PDF documents then consider www.PDF.co service with REST API and Zapier support.

Our code

The HTML page we’ll be outputting as a PDF…

…and our final generated PDF file!

The steps we’ve taken to generate a PDF using this approach are:

Download jQuery and the JSPDF open-source library from the appropriate Content Delivery Network:
1. You can download jquery here: http://jquery.com/download/
2. You can download JSPDF here: https://github.com/MrRio/jsPDF

(Note: CDNs are preferred as a source of these libraries rather than downloading *.js files because libraries are kept updated. In addition, if the libraries are downloaded from the same CDN, your browser can have the library saved already through some other website, reducing time on multiple projects).

Create a new HTML file, including the JS libraries in the <Script> tag. Here in the sample code, we have used the CDN URLs:

Define the HTML body to contain the two-division tags, displaying different information on the screen. The button we’re making here is labeled “Generate PDF”, and will be used to trigger the PDF generation process.

<h3>First PDF</h3>

<p>Content to be written in PDF can be placed in this DIV!</p>

</div>

<p>Only for display and not in pdf</p>

</div>

<button id=”gpdf”>Generate PDF</button>

Initialize the JSPDF object in the script tag, and define its properties. When the “Generate PDF” button is pressed, the function will be triggered. This function is included inside the document-ready function, which will prevent the function listed within the block from being invoked when the complete page is not loaded.

$(“#gpdf”) is the jQuery selector that helps to monitor clicks on the button with id=”gpdf”. Once clicked, it will invoke the code written within the click block. The function triggered will define the dimensions of the pdf file to be generated, and the object “specialElementHandlers”, which will define any additional properties to be taken under consideration while writing the data into the PDF. In this example, the code will bypass the text defined under the “ignoreContent” div, and will only display the content defined under the “PDFcontent” div.

var pdfdoc = new jsPDF();

var specialElementHandlers = {

‘#ignoreContent’: function (element, renderer) {

return true;

}

};

$(document).ready(function(){

$(“#gpdf”).click(function(){

pdfdoc.fromHTML($(‘#PDFcontent’).html(), 10, 10, {

‘width’: 110,

‘elementHandlers’: specialElementHandlers

});

pdfdoc.save(‘First.pdf’);

});});

In the generated file, only the contents in “PDFcontent“ will be displayed. And this means we’re done – our file will be generated with the filename First.pdf!

How to Generate a PDF with JQuery

Also consider ByteScout: Web API for full-featured HTML to PDF and PDF transformations

See also:

Related Posts