Generate PDF File Using jsPDF Library

Generate PDF File Using jsPDF Library

Last Updated : 07 Feb, 2025

The PDF Generation Project in JavaScript aims to create a seamless tool for generating PDFs dynamically. It allows users to easily convert data into well-formatted PDF documents, enhancing productivity and user experience with quick and efficient document creation.

What Will You Learn?

We’ll build an application that allows users to

Input content in a text field or upload data.
Dynamically generate a PDF document based on the entered content.
Customize the PDF format, including text, images, and layout.
Download or preview the generated PDF.
Provide a clean and user-friendly interface for seamless document creation.

The application will ensure a smooth, interactive experience with instant feedback and easy PDF generation.

Project Preview

Screenshot-2025-01-15-122743 — How to generate PDF file using jsPDF library

Generate PDF File - HTML and CSS Code

HTML

<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f9;
        }
        .container {
            text-align: center;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Generate PDF with jsPDF</h1>
        <button onclick="generatePDF()">Generate PDF</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</body>
</html>

In this code

The page uses CSS Flexbox to center a .container div, giving it a white background, rounded corners, and a shadow effect for a clean look.
A button labeled "Generate PDF" is styled with a green background and hover effect, set to trigger the generatePDF() function when clicked.
The jsPDF library is included via a CDN, enabling JavaScript-based PDF generation.

Generate PDF File - Javascript code

JavaScript

function generatePDF() {
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();       

    doc.text("Hello, this is a PDF generated with jsPDF!", 100, 100);  

    doc.save("sample.pdf");
}

The function extracts jsPDF from window.jspdf and creates a new PDF document using new jsPDF().
Adds text "Hello, this is a PDF generated with jsPDF!" at coordinates (100, 100) in the document.
Saves and downloads the generated PDF as "sample.pdf" using doc.save().

Complete code

HTML

<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f9;
        }
        .container {
            text-align: center;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Generate PDF with jsPDF</h1>
        <button onclick="generatePDF()">Generate PDF</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script>
        function generatePDF() {
            const { jsPDF } = window.jspdf;  
            const doc = new jsPDF();        
            doc.text("Hello, this is a PDF generated with jsPDF!", 100, 100); 
            doc.save("sample.pdf");  
        }
    </script>
</body>
</html>

Generate PDF File Using jsPDF Library

G

geetanjali16

Improve

Article Tags :

Similar Reads

Generate PDF in ElectronJS

ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime.

How to design runtime generated PDF via HTML ?

Runtime-generated PDFs via HTML refer to creating PDF documents on-the-fly using HTML content. This process involves rendering HTML elements into a PDF format during application execution, allowing dynamic data and layouts to be included, which is useful for generating reports, invoices, or other do

How to Embed PDF file using HTML ?

We will learn how to embed PDF files in HTML documents and explore their implementation through examples. Sometimes, you may want to insert a PDF file into an HTML document to make the content more interactive. Since HTML and PDF formats are different, embedding PDFs can be a bit challenging. Here a

How to Download PDF File on Button Click using JavaScript ?

Sometimes, a web page may contain PDF files that can be downloaded by the users for further use. Allowing users to download the PDF files can be accomplished using JavaScript. The below methods can be used to accomplish this task. Table of Content Using html2pdf.js libraryUsing pdfmake LibraryUsing

How to Print a Page using jQuery?

Printing a webpage directly from the browser can be a useful feature for users who want a physical copy of the content. With jQuery, a popular JavaScript library that simplifies HTML document manipulation and event handling, you can easily implement a print function on your webpage. This guide will