How to Create PDFs in React from JSON Data with jsPDF

This article will show how to create PDF in JS/React from JSON data.

As developers, we must integrate PDF generation within the application. So, in this article, we will discuss creating PDFs using jspdf.

So, Let’s get started.

We will use a React environment specifically for this article. I assume you’re familiar with JavaScript/React and have already set up the React environment

Before diving in, we need some sample data to generate the PDF. We’ll create a method to generate this data.

const generateUsers = (count) => {
    const users = [];

    for (let i = 1; i <= count; i++) {
      const user = {
        id: i,
        firstName: `firstName_${i}`,
        lastName: `lastName_${i}`,
        email: `email_${i}@example.com`,
        address: [
          `Street ${i + 1}, Address Line 1`,
          `District ${(i % 7) + 1}, City_${i}`,
        ],
      };
      users.push(user);
    }
    return users;
  };

Now, we need to install some npm packages jspdf and jspdf-autotable.

jsPDF is responsible for creating PDFs, while jsPDF-AutoTable is used to display data in a table format within the PDF.

You can use the following command to install both packages.

npm i jspdf-autotable jspdf

Now, we are going to develop a method to handle PDF creation. I’ll create a generic generatePDF method, so you can use it anywhere you need.

1. Function Definition

The function generatePDF takes data as an argument, which is expected to be an array of objects (the JSON data to include in the PDF).

export const generatePDF = (data) => {

2. PDF Document Setup
A new jsPDF instance is created with the following options:

"l" for landscape orientation.
"pt" as the unit of measurement (points).
"a3" as the paper size.

const doc = new jsPDF("l", "pt", "a3");

// if you want to use custom dimensions
// width,height

const doc = new jsPDF("l", "pt", [3000,1000]);

3. Adding Title to the PDF

Sets the font size to 16 points.
Adds a centered title, "JSON Data PDF", at the top of the page (y-position of 30).

doc.setFontSize(16);
doc.text("JSON Data PDF", doc.internal.pageSize.getWidth() / 2, 30, {
    align: "center",
});

4. Extracting Table Headers

Extracts the keys from the first object in data to use as column headers for the table.
Assumes data has at least one object, and all objects have similar keys.

const tableColumnHeaders = Object.keys(data[0]);

5. Formatting Table Rows

Iterates over each object in data, creating a new array (tableRows) where:

Each entry corresponds to a row of the table.
For each cell, if the value is an array, it joins elements with a comma; otherwise, it adds the value as is.

const tableRows = data.map((row) =>
    Object.keys(row).map((key) => {
        const value = row[key];
        if (Array.isArray(value)) {
            return value.join(", ");
        }
        return value;
    })
);

6. Adding the Table to the PDF

Configures the table with the following options:

startY: 50 positions the table 50 points below the top of the page.
head uses tableColumnHeaders as the table’s header row.
body is populated with tableRows, displaying data row-by-row.
margin specifies spacing around the table.
styles adjusts the cell font size, padding, and vertical alignment.
headStyles sets header row styles: blue background, white text, and 12-point font.
alternateRowStyles adds a light gray background for alternating rows.
columnStyles attempts to set column width automatically.
theme: "striped" applies a striped theme to the table.

doc.autoTable({
    startY: 50,
    head: [tableColumnHeaders],
    body: tableRows,
    margin: { top: 50, left: 20, right: 20 },
    styles: {
        fontSize: 10,
        cellPadding: 5,
        valign: "middle",
    },
    headStyles: { fillColor: [41, 128, 185], textColor: 255, fontSize: 12 },
    alternateRowStyles: { fillColor: [245, 245, 245] },
    columnStyles: { auto: { cellWidth: auto } },
    theme: "striped",
});

7. Saving the PDF
Saves the PDF file with the filename "JS-pdf.pdf".

doc.save(`${fileName}.pdf`);

Here is the full version of this code.

// App.jsx

import "./styles.css";
import { generatePDF } from "./pdf.jsx";

export default function App() {
 const generateUsers = (count) => {
    const users = [];

    for (let i = 1; i <= count; i++) {
      const user = {
        id: i,
        firstName: `firstName_${i}`,
        lastName: `lastName_${i}`,
        email: `email_${i}@example.com`,
        address: [
          `Street ${i + 1}, Address Line 1`,
          `District ${(i % 7) + 1}, City_${i}`,
        ],
      };
      users.push(user);
    }
    return users;
  };

  const PdfGenerator = () => {
    let jsonData = generateUsers(100);
    generatePDF(jsonData);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={PdfGenerator}>Print PDF</button>
    </div>
  );
}

//Pdf.jsx

import jsPDF from "jspdf";
import "jspdf-autotable";


export const generatePDF = (data) => {

  let fileName = "JS-pdf";
  const doc = new jsPDF("l", "pt", "a3");

  doc.setFontSize(16);
  doc.text("JSON Data PDF", doc.internal.pageSize.getWidth() / 2, 30, {
    align: "center",
  });

  const tableColumnHeaders = Object.keys(data[0])

  // Determine the table rows based on the values in data
  const tableRows = data.map((row) =>
    Object.keys(row).map((key) => {
          const value = row[key];

          if (Array.isArray(value)) {
            return value.join(", ");
          }
          return value; // Return non-array values as is
        })
  );

  doc.autoTable({
    startY: 50,
    head: [tableColumnHeaders],
    body: tableRows,
    margin: { top: 50, left: 20, right: 20 },
    styles: {
      fontSize: 10,
      cellPadding: 5,
      valign: "middle",
    },
    headStyles: { fillColor: [41, 128, 185], textColor: 255, fontSize: 12 },
    alternateRowStyles: { fillColor: [245, 245, 245] },
    columnStyles: { auto: { cellWidth: auto } }
    theme: "striped",
  });

  doc.save(`${fileName}.pdf`);
};

This is done for now. Hopefully, you enjoyed it. Have a nice day !!!

Blog

How to Create PDFs in React from JSON Data with jsPDF

Mukarram Javid

Join Our Newsletter. No Spam, Only the good stuff.

Related