How to Generate a PDF with JQuery

  • Home
  • /
  • Blog
  • /
  • How to Generate a PDF with JQuery
Try Free SQL Trainer - learn by doing!
SQL queries made easy - Natural Questions to SQL Converter.

Saving web page content is a useful function to be able to integrate to 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.

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 JSPDF library to generate a PDF.  If you are looking for an easy way to convert HTML to PDF then you may generate full-featured PDF with Unicode and other formatting features by passing url or HTML code to Web API powered by ByteScout.

Bytescout PDF Generator SDK for Javascript that can also run on Android, iOS browsers and can generate PDFs with text with font formatting, links, tables, and images.

Generate PDF Files

Our code

Creade Files pdf

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

Create a PDF File

…and our final generated PDF file!

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

  1. Download jQuery and the JSPDF 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).

  1. Create a new HTML file, including the JS libraries in the <Script> tag. Here in the sample code we have used the CDN URLs:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js”></script>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

  1. 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.
<div id=”PDFcontent“>

<h3>First PDF</h3>

 

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

</div>

<div id=”ignoreContent“>

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

</div>

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

  1. 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!

 

 

 

prev
next