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
datato use as column headers for the table. - Assumes
datahas 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. -
headuses tableColumnHeaders as the table’s header row. -
bodyis populated with tableRows, displaying data row-by-row. -
marginspecifies spacing around the table. -
stylesadjusts the cell font size, padding, and vertical alignment. -
headStylessets header row styles: blue background, white text, and 12-point font. -
alternateRowStylesadds a light gray background for alternating rows. -
columnStylesattempts 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 !!!
Top comments (0)