Generate PDFs with jsPDF: A Complete Guide to Client-Side PDF Creation

Generating PDFs directly in the browser can significantly enhance user experience by delivering immediate, downloadable documents without server-side processing. This client-side approach reduces server load while enabling offline functionality and instant feedback for users. In this guide, we'll demonstrate how to create dynamic PDFs using jsPDF and html2canvas — ideal for applications where real-time document generation and personalization are essential, from invoices and certificates to reports and tickets.

What is jsPDF?

jsPDF is an open-source JavaScript library that enables you to generate PDF files directly in the browser. Designed to work entirely on the client-side, it allows developers to create PDFs dynamically without relying on server-side processing. With jsPDF, you can add text, images, shapes, and even HTML content (with the help of complementary libraries like html2canvas) to your PDF documents.

Client-Side PDF Generation

✅ Advantages	❌ Disadvantages
No server requests needed	Limited by browser capabilities
Works offline	Resource-intensive for complex documents
Immediate feedback	Inconsistent rendering across browsers
Reduces server load	Security concerns with sensitive data
Simple integration	Limited styling capabilities
Complete privacy control	Challenging page break handling and multi-page documents
Customizable PDF structure	Large file sizes for image-heavy content

When to Use Client-Side PDF Generation

This approach is ideal when:

• You need simple PDFs generated instantly.
• Offline functionality is required.
• Server resources are limited.
• Documents are small and straightforward.

Practical Use Cases

• Receipts and Invoices: Generate purchase confirmations instantly after checkout.
• Certificates: Create course completion certificates in learning platforms.
• Event Tickets: Produce personalized tickets for immediate use.
• Data Exports: Convert dashboard visualizations to PDF for offline reference.
• Form Summaries: Transform web form submissions into downloadable records.

Creating a PDF with jsPDF

Setting Up Your Project

• Before you start, ensure you have Node.js and npm installed.

• Then install required packages:

npm install jspdf html2canvas

• Alternatively, you can load the libraries directly from CDN in your HTML:

<!-- Include jsPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/3.0.0/jspdf.umd.min.js"></script>

<!-- Include html2canvas -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

Generating a Simple PDF

Let's start with a basic example demonstrating how to create a PDF document using jsPDF.

This example creates a simple PDF containing text elements, metadata, and the current date, and triggers its download.

Code

    // Create a new jsPDF instance
    const { jsPDF } = require("jspdf");
    const doc = new jsPDF({
        orientation: 'landscape', // 'portrait' or 'landscape'
        format: 'letter',         // Paper size: 'a4', 'letter', etc.
    });

    // Add document metadata
    doc.setProperties({
        title: 'Sample PDF Document',
        author: 'jsPDF',
        subject: 'PDF Generation',
    });

    // Add content
    doc.setFont("helvetica", "bold");
    doc.setFontSize(20);
    doc.text("Hello, I hope you have an awesome day!", 20, 20);

    // Add more content
    doc.setFont("helvetica", "normal");
    doc.setFontSize(16);
    doc.text("This document was created with jsPDF.", 20, 40);

    // Add the current date
    const today = new Date().toLocaleDateString();
    doc.text(`Generated on: ${today}`, 20, 60);

    // Save the PDF
    doc.save("simple-document.pdf");

Output

When executed, this code generates a PDF file named simple-document.pdf.

PDF Generation with jsPDF Only

• For many applications, generating PDFs using jsPDF directly is sufficient. In the next example, we demonstrate how to generate a PDF based on user input.

• Here, a form is used to collect user data, and upon submission, jsPDF (in combination with the AutoTable plugin) creates a neatly formatted PDF.

Fill out the form below and click Generate PDF to see jsPDF in action:

Fill Out the Form

Name *

Name *

Favorite Food *

​

Favorite Food *

Note *

Note *

Below is a complete code demonstrating how to generate a PDF from a form using jsPDF.

View Complete Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PDF Form</title>
    <style>
        /* Form styling */
        body {
            font-family: Arial, sans-serif;
            padding: 30px;
        }
        .container {
            max-width: 500px;
            background-color: #fff;
            padding: 25px 30px 30px;
            margin: 0 auto;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 8px;
        }
        h2 {
            text-align: center;
            color: #1976d2;
        }
        form {
            display: flex;
            flex-direction: column;
        }
        label {
            color: #333;
            font-size: 16px;
            margin-top: 20px;
        }
        input[type="text"],
        textarea,
        select {
            padding: 15px;
            margin-top: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            font-size: 18px;
            margin: 35px 0 10px;
            padding: 12px;
            background-color: #1976d2;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.5s;
        }
        button:hover {
            background-color: #1565c0;
        }
    </style>
    <!-- Include jsPDF and AutoTable plugin from CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>
</head>
<body>
<!-- Form Container -->
<div class="container">
    <h2>Fill Out the Form</h2>
    <form id="user-form">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" maxlength="50" required>

            <label for="food">Favorite Food:</label>
            <select id="food" name="food" required>
                <option value="">Select an option</option>
                <option value="Triple cheese pizza">Triple cheese pizza</option>
                <option value="Only healthy food">Only healthy food</option>
                <option value="Always chocolate">Always chocolate</option>
                <option value="On a Diet">I'm on a diet</option>
                <option value="Sushi over everything">Sushi over everything</option>
                <option value="I eat everything">I eat everything</option>
            </select>

            <label for="message">Note:</label>
            <textarea id="message" name="message" maxlength="200" required></textarea>

            <!-- Button to submit form and trigger PDF generation -->
            <button type="submit">Generate PDF</button>
    </form>
</div>

<script>
    // Listen for the form's submit event
    document.getElementById('user-form').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent default form submission behavior

        // Retrieve user input values from the form
        const name = document.getElementById('name').value;
        const food = document.getElementById('food').value;
        const message = document.getElementById('message').value;

        // Initialize jsPDF with specified configuration
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF({
            orientation: 'portrait',
            unit: 'pt',
            format: 'letter'
        });

        // Add header section
        doc.setFont("times", "bold");
        doc.setFontSize(24);
        doc.text("Form Summary Report", 40, 60);

        // Table section using AutoTable
        const tableColumn = ["Field", "Value"];
        const tableRows = [
            ["Name", name],
            ["Favorite Food", food],
            ["Note", message]
        ];
        doc.autoTable({
            head: [tableColumn],        // Table header row
            body: tableRows,            // Table data rows
            startY: 100,                // Starting Y position
            theme: 'grid',              // Table style theme
            headStyles: {               // Header cell styling
            fillColor: [25, 118, 210],  // Blue background (RGB)
            textColor: 255,             // White text
            halign: 'center',           // Horizontal alignment
            fontSize: 14,               // Font size
            fontStyle: 'bold'           // Font style
        },
        styles: {                       // Body cell styling
            font: "times",              // Font family
            fontSize: 12,               // Font size
            cellPadding: 5,             // Cell padding
            textColor: 0                // Black text
},
    margin: { left: 40, right: 40 } // Table margins
});

        // Get the Y position after the table
        const finalY = doc.lastAutoTable.finalY;

        // Add a footer below the table
        doc.setFont("times", "italic");
        doc.setFontSize(12);
        doc.text("PDF generated with jsPDF!", 40, finalY + 30);

        // Trigger the download of the generated PDF file
        doc.save("form-summary.pdf");
    });
</script>
</body>
</html>

note

The AutoTable plugin extends jsPDF with table generation capabilities, making it easy to create structured data layouts in your PDFs.

PDF Generation with html2canvas and jsPDF

• In some cases, you may want to capture the exact look of your web page — including all the applied styles — and convert it into a PDF.
• By combining html2canvas with jsPDF, you can capture an HTML element as an image and then embed it into a PDF.
• This method is especially useful when you want to maintain the original design of your HTML content in the final PDF.

What is html2canvas?

html2canvas captures HTML elements as images by converting DOM and CSS into canvas content. It preserves the exact visual appearance of your page, including layouts, fonts, and styling that jsPDF can't natively render.

Below is a complete code example that demonstrates how to generate a PDF from a form using html2canvas and jsPDF. In this example, the form is captured as an image when submitted, and that image is inserted into a PDF document.

View Complete Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PDF Form with html2canvas</title>
    <style>
        /* Form styling */
        body {
            font-family: Arial, sans-serif;
            padding: 30px;
        }
        .container {
            max-width: 500px;
            background-color: #fff;
            padding: 25px 30px 30px;
            margin: 0 auto;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 8px;
        }
        h2 {
            text-align: center;
            color: #1976d2;
        }
        form {
            display: flex;
            flex-direction: column;
        }
        label {
            color: #333;
            font-size: 16px;
            margin-top: 20px;
        }
        input[type="text"],
        textarea,
        select {
            padding: 15px;
            margin-top: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            font-size: 18px;
            margin: 35px 0 10px;
            padding: 12px;
            background-color: #1976d2;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.5s;
        }
        button:hover {
            background-color: #1565c0;
        }
    </style>
    <!-- Include html2canvas and jsPDF from CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
<!-- The container holds the form that we want to capture -->
<div id="form-container" class="container">
    <h2>Fill Out the Form</h2>
    <form id="user-form">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" maxlength="50" required>

        <label for="food">Favorite Food:</label>
        <select id="food" name="food" required>
            <option value="">Select an option</option>
            <option value="Triple cheese pizza">Triple cheese pizza</option>
            <option value="Only healthy food">Only healthy food</option>
            <option value="Always chocolate">Always chocolate</option>
            <option value="On a Diet">I'm on a diet</option>
            <option value="Sushi over everything">Sushi over everything</option>
            <option value="I eat everything">I eat everything</option>
        </select>

        <label for="message">Note:</label>
        <textarea id="message" name="message" maxlength="200" required></textarea>

        <!-- Button to submit the form and generate the PDF -->
        <button type="submit">Generate PDF</button>
    </form>
</div>

<script>
    // Listen for the form's submit event
    document.getElementById('user-form').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent the default form submission

        // Capture the #form-container using html2canvas
        html2canvas(document.getElementById('form-container')).then(function(canvas) {
        const imgData = canvas.toDataURL('image/png');
        const { jsPDF } = window.jspdf;

        // Create a new PDF document
        const pdf = new jsPDF({
            orientation: 'landscape',
            unit: 'pt',
            format: 'a4'
        });

        // Add the captured image to the PDF
        pdf.addImage(imgData, 'PNG', 120, 0);

        // Add footer text
        pdf.setFont('helvetica', 'italic');
        pdf.setFontSize(12);
        pdf.text('Captured with html2canvas and jsPDF', 150, 580);

        // Save the PDF
        pdf.save('form-html2canvas.pdf');
    });
 });
</script>
</body>
</html>

The code above will generate a PDF that looks like this:

Conclusion

Generating PDFs on the client-side with jsPDF and html2canvas provides a robust solution for creating dynamic, high-quality documents directly in the browser. This approach allows you to streamline document generation, reduce server load, and deliver instant, downloadable PDFs to your users. Whether you're building invoices, certificates, or real-time reports, mastering client-side PDF generation is a valuable skill in modern web development. Embrace these techniques to enhance your application's performance and create visually appealing, personalized documents with ease.

Best of luck with all your projects! 🫶