How to generate PDFs in JavaScript using jsPDF

In the article below we'll cover client-side PDF generation in JavaSript with jsPDF.

Getting started: Pick the installation that suits you best.

CDN hosted library:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"> </script>
Latest version with unpkg:
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
npm:
npm install jspdf --save
yarn:
yarn add jspdf

Inserting text:

First you need to create a pdf document:


        var pdf = new jsPDF('landscape', 'px', 'a4');

The jsPDF constructor gets the page orientation, the measuring unit and the page format as parameters. If not specified, them the defaults will be portrait, A4 and millimeters (mm). It supports the most common page formats, and each format contains the size so you can inspire from the library when building your pdf.

To add text at an absoulte position in your document you need to use:

pdf.text('Hello getPDFapi!', 123.45, 321.774);

The first argument is the text that needs to be displayed. The method supports adding multiline text when the argument is an array of Strings. The next 2 parameters are X and Y coordinates in units delcared when constructing the jsPDF object. The method also supports options - a collection of settings that specify how the text should be encoded and transform which will rotate the text by it's value around the anchor set by x and y.

Customizing your text further:

 pdf.addFileToVFS('Roboto.ttf','YOUR_ENCODED_FONT'); 

        pdf.setFontType('bold'); 

        pdf.addFont('Roboto.ttf', 'Roboto', 'bold');  

        pdf.setFont('Roboto');  

        pdf.setFontSize(11);  

        pdf.text('text', 486.1876527655285, 101.14478267454187);

Let's break down the above code:

The first line is a little bit tricky. Here we are telling jsPDF that we want to add a custom font and use it in our document. This method gets the font name and the base64 encoded font as parameters. I found this to be a little bit tricky. At first sight, jsPDF only supports .ttf fonts, if you want for example to add a .woff2 font you have to use a converter. I would definitely use an out-of-the box solution to avoid writing this.
The second line will set the font type. This method will try to get a font of your style(bold, italic etc.). If the font is not found, everything will fail and we never go furhter.
In the third line we add our custom font to the current instance. This function can takes 4 parameters (postScriptName, fontName, fontStyle, encoding). 'postScriptName' is the full name of the font, 'fontName' is an id PDF-document-instance-specific label assinged to the font, and the last 2 are the fontStyle and encoding.
In the last 2 lines, the font size and the text element are specified. The element will contain all the customization done above.

Inserting images:

 
        pdf.addImage(imageData, format, x, y, width, height, alias, compression, rotation)

imageData should be either a base64 encoded image, ImageHTMLElement or Canvas-HTMLElement
format(e.g "PNG", "WEBP") should be specified id the imageData type recognition fails or if the type of the image is Canvas-Element. The default for canvas is "JPEG".
x and y are the coordinates. They are represented in the units declared when initializing the jsPDF.
widht and height are also represented in the units declared when initializing the jsPDF.
alias can be specified if the image is used multiple times.
compression can be "NONE", "FAST", "MEDIUM" and "SLOW"
rotation 0-359 degrees

Inserting tables:

Tables can be generated either directly from HTML attributes or manually.


        <table id=”the-table”> </table> 


        pdf.autoTable({html:”#the-table”});