Introduction to JsPDF – Autotable plugin in JavaScript

JsPDF is a JavaScript plugin that is used to generate pdf’s containing tables, either by parsing HTML tables or from JavaScript supplying the data directly. When we use this plugin in our webpage, it will automatically download the generated pdf to our local machine.

Installing jsPDF-Autotable

There are 3 ways to install this plugin

  •  Using NPM
    npm install jspdf jspdf-autotable
  • Using CDN
    <script src="jspdf.min.js"></script>
    <script src="jspdf.plugin.autotable.min.js"></script>
  • Download the jsPDF and jsPDF-autotable from github

 

HTML Code

This is the base HTML code and it will be used for all the below examples. We will be using CDN to use this plugin in JavaScript. The webpage contains a button and on clicking the button, the gets downloaded to the local machine.

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.2.13/jspdf.plugin.autotable.min.js"></script>

</head>
<body>
    <button type="button" onclick="demo()">Download!</button>
</body>
</html>

 

Generating jsPDF-Autotable

The sample code shown below demonstrates creating a simple table.

  • The first step is to initialize an object. In line 3, obj is created using new jdPDF(), and ‘landscape’ is passed as an argument to the constructor denoting the pdf to be in landscape format. Other formats that can be passed is ‘portrait’.
  • Next, we put some text on top of the page, say ‘Sample Table’. Line 4 uses the obj object to call text() method to display text. It takes 5 arguments in total out of which 3 are required arguments. The first argument is the string or array of string. The second and third are the coordinate positions to determine where the text has to be placed.
  • Now we create the table. In line 5, we call the autoTable() method. It contains a lot of arguments but we will be focusing on few basic ones. startX, startY denotes the coordinate position to place the table. Then we have head that takes in an array of texts that denotes the column name. Here we used 3 column names, namely ‘Name’, ‘City’, ‘Phone No’. Then we have a body that contains each row of data as an array.
  • Finally, we call save() method passing some names for the pdf. This method when encountered automatically downloads the pdf to the local machine.
function demo() {
    var obj = new jsPDF('landscape')
    obj.text('Sample Table', 20, 20)
    obj.autoTable({
        startX: 30,
        startY: 30,
        head: [
            ['Name', 'City', 'Phone No.']
        ],
        body: [
            ['Donna', 'New York', '8456210'],
            ['Rachel', 'Los Angeles', '7845521'],
            ['Harvey', 'Chicago', '9865371']
        ],
    });
    obj.save('example.pdf');
}

 

Adding a new page in the PDF

We can add multiple pages in a pdf. The method addPage() takes 2 optional arguments namely, format and orientation. Format denotes the format of the new page, for example, a4, b1, letter, ledger, etc. By default, the format is a4. Orientation denotes orientation of the new page that is, ‘portrait’ or ‘landscape’. We can also use the shortcut, ‘p’ or ‘l’ respectively. The sample code is shown below.

function demo() {
    var obj = new jsPDF('landscape')
    obj.text('Page 1', 20, 20)
    obj.autoTable({
        startY: 30,
        startX: 30,
        head: [
            ['Name', 'City', 'Phone No.']
        ],
        body: [
            ['Donna', 'New York', '8456210'],
            ['Rachel', 'Los Angeles', '7845521'],
            ['Harvey', 'Chicago', '9865371']
        ],
    });

    obj.addPage(format = 'a0', orientation = 'p');

    obj.text('Page 2', 20, 20)
    obj.autoTable({
        startY: 30,
        startX: 30,
        head: [
            ['Name', 'City', 'Phone No.']
        ],
        body: [
            ['Donna', 'New York', '8456210'],
            ['Rachel', 'Los Angeles', '7845521'],
            ['Harvey', 'Chicago', '9865371']
        ],
    });
    obj.save('example.pdf');
}

 

These are the few basic and frequently used methods to generate a table using jsPDF. We can build these PDF’s in different styles. Please refer to the official examples for more ideas.

For more information, please refer to the official documentation and official source code on GitHub.

Please post your comments, doubts, queries in the comment box. Happy Learning 🙂

Also, read

Leave a Reply

Your email address will not be published. Required fields are marked *