Generate a PDF of a Table on the Client Side with jsPDF and jspdf-autotable in React

Generate a PDF of a Table on the Client Side with jsPDF and jspdf-autotable

Creating downloadable PDFs of tables is a great way to offer users summaries, reports, or logs directly from a web app. In this tutorial, we’ll build a React component that generates a PDF with a formatted table using jsPDF and the jspdf-autotable plugin.

Step 1: Install jsPDF and jspdf-autotable

To get started, install jsPDF and jspdf-autotable:

npm install jspdf jspdf-autotable

Step 2: Create the PDF Generation Function

In your component file (e.g., AdventureLog.js), start by defining a generatePDF function. This function will take in customizable data for columns, rows, and title to generate the PDF.

Code for PDF Generation

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

const generatePDF = ({ title, columns, rows }) => {
  const doc = new jsPDF();

  // Set the document title
  doc.setFontSize(18);
  doc.text(title, 104, 20, { align: "center" });

  // Create the table with `autoTable`
  doc.autoTable({
    startY: 30,
    head: [columns],
    body: rows,
    styles: { cellPadding: 1.5, fontSize: 8 },
    theme: "grid",
    headStyles: {
      fillColor: [0, 0, 0, 0], // Transparent header background
      textColor: "#000",
      lineWidth: 0.1,
      fontSize: 9,
    },
  });

  // Save the PDF file with a title-based filename
  doc.save(`${title.replace(" ", "_").toLowerCase()}.pdf`);
};

Function Details

1. Title: We set a title centered at the top using doc.text.
2. Table: The autoTable method makes it easy to generate a structured table using columns for headers and rows for data.
3. Save: Finally, the file is saved with a filename derived from the title.

Step 3: Create the React Component

Next, set up the AdventureLog component with a button that triggers the PDF download.

import React from "react";
const AdventureLog = () => {
  const handleDownloadPDF = () => {
    const title = "Adventure Log";
    const logColumns = ["Date", "Location", "Activity", "Companions", "Duration", "Notes"];
    const logRows = [
      ["2024-10-01", "Grand Canyon", "Hiking", "Alice, Bob", "3 hrs", "Sunny day"],
      ["2024-10-02", "Yosemite", "Camping", "Charlie", "2 days", "Clear skies"],
      ["2024-10-03", "Lake Tahoe", "Kayaking", "Alice", "4 hrs", "Choppy waters"],
      ["2024-10-04", "Zion National Park", "Climbing", "Bob, Diana", "5 hrs", "Hot weather"],
      ["2024-10-05", "Death Valley", "Sightseeing", "Eve", "1 day", "Very hot"],
    ];
    generatePDF({ title, columns: logColumns, rows: logRows });
  };
  return (
    <div>
      <h1>Adventure Log</h1>
      <button onClick={handleDownloadPDF}>Download PDF</button>
    </div>
  );
};
export default AdventureLog;Ï

Explanation

• handleDownloadPDF: This function prepares the title, columns, and rows for the table, then calls generatePDF with these values.
• Download Button: The button triggers handleDownloadPDF, generating and downloading the PDF.

Conclusion

With jsPDF and jspdf-autotable, generating client-side PDFs of structured tables becomes simple and highly customizable. This approach allows you to create tailored downloadable content directly from your React app without server-side dependencies.

Find me on your favorite platform

• Github — Follow me on GitHub for further useful code snippets and open source repos.
• My Portfolio — Connect with me through my portfolio
• LinkedIn Profile — Connect with me on LinkedIn for further discussions and updates.
• Twitter (X) — Connect with me on Twitter (X) for useless tech tweets.