How to generate PDF Table from API Data in React ? | jsPDF and jsPDF-autotable Javascript library

by

As a frontend developer, we get Data from API Responses all the times. And we render it on UI.

However, sometimes we might not want to display this data on UI. Instead we want it in a PDF that can be downloaded easily.

We will use jsPDF library to achieve this.

In some situations, we also might want to display data inside pdf in tabular form. For this purpose, we will use jsPDF-autotable library alongside jsPDf.

NB: jsPDF-autotable is and extension of jsPDF. You should use jsPDF-autotable only when you want pdf data to be displayed in tabular format.

 

STEP-1: Install it to your Project

A. Get jspdf library- (npm link) npm install jspdf --save OR yarn install jspdf

OR (to try it with CDN)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

B. Get jspdf-autable library- (npm link) 
npm install jspdf-autotable --save

OR 

yarn install jspdf-autotable
 

STEP-2: import libraries to your component

import jsPDF from "jspdf";
require('jspdf-autotable');
Note: if require(‘jspdf-autotable’) shows error. import it like jspdf.

STEP-3: Use it in your Component

we make an array of animals.

const animals = ['Tiger', 'Lion', 'Jaguar']

Now we make a function that we want to run to generate PDF. we call it PrintPDF() function.

const PrintPDF = () => {}

Inside this function we make an object of `jsPDF`class that we imported earlier. we call it pdf.

const PrintPDF = () => {

const pdf = new jsPDF("p", "pt", "a4");

}

jsPDF class takes three arguments.

First one is ‘orientation’ that we have given ‘p’ (portrait).

Second one is unit that we have given ‘pt’.

Third one is document format size that we have given ‘a4’, because we want large size pdf.

It’s time to do some formatting of our PDF document.

       pdf.setFontSize(30)
       `pdf.text(‘List Of Animals’, 170, 40);
      pdf.setTextColor(0, 0,255)
This will make set font size of our document. Will print ‘List of Animals’ text on it. Also will set text color of our pdf document.
So far, we have used only jsPDF library. However, now to show table of animals we use jspdf-autotable with jspdf which is an extension to the later one.
So, to make a table, we first define our Rows and Columns. Both will be arrays.
const rows = animals (as we want to show animals name as rows, so we copy the array)
const columns = [‘Name of the Animal’]
Now we use autoTable function of jspdf-autotable library with ‘pdf’ object of jspdf class. And give it our arrays of columns and rows.
pdf.autoTable(columns, rows, {
      startY: 140,
      theme: “grid”,
      styles: {
        font: “times”,
        halign: “center”,
        cellPadding: 3.5,
        lineWidth: 0.5,
        lineColor: [0, 0, 0],
        textColor: [0, 0, 0]
      },
      headStyles: {
        textColor: [0, 0, 0],
        fontSize: 12,
        fontStyle: “bold”,
        lineWidth: 0.5,
        lineColor: [0, 0, 0],
        fillColor: [239, 154, 154]
      },
      alternateRowStyles: {
        fillColor: [212, 212, 212],
        textColor: [0, 0, 0],
        lineWidth: 0.5,
        lineColor: [0, 0, 0]
      },
      rowStyles: {
        lineWidth: 0.5,
        lineColor: [0, 0, 0]
      },
      willDrawCell: function (data) {
        let rows = data.table.body;
        if (data.row.index === rows.length – 1) {
           pdf.setFont(‘times’, ‘bold’)
           pdf.setFontSize(12)
          pdf.setFillColor(166, 204, 247);
        }
    },
      tableLineColor: [0, 0, 0]
    });
Finally, we give our PDF document a name. Our pdf will be saved with this name when somebody downloads it.
    pdf.save('list of animals);
This was it all. Easy-peassy!!
PS: add scshot from video. and format the code right way.

Leave a Comment