Generate PDF in ElectronJS

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 in ElectronJS

G

geetanjali16

Improve

Article Tags :

Similar Reads

How to generate PDF file using PHP ?

In this article, we will learn how to generate PDF files with PHP by using FPDF. It is a free PHP class that contains many functions for creating and modifying PDFs. The FPDF class includes many features like page formats, page headers, footers, automatic page break, line break, image support, color

How to generate PDF file and add TrueType fonts using PHP ?

In this article, we will learn how to generate PDF files and add new TrueType fonts with PHP by using FPDF. It is a free PHP class that contains many functions for creating and modifying PDFs. The FPDF class includes many features like page formats, page headers, footers, automatic page break, line

How to read PDF file using PHP ?

In this article, we will learn how you can show/read PDF file contents on a browser using PHP. We have to include an external PHP file named "class.pdf2text.php". Include it in the required web page using PHP. Create an HTML form, in which we can choose a PDF file from your computer and also check w

Image To PDF Converter using React

Image To PDF Converter using React is a web application that allows users to upload images and convert them into PDF documents. It uses React's state management and file handling capabilities to provide a user-friendly interface for image upload, display, deletion, and PDF generation. This applicati

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 open PDF file in new tab using ReactJS ?

React JS, a commonly used JavaScript library for building user interfaces, sometimes requires opening PDF files in a new tab or window when a button is clicked. You can make this happen by bringing the PDF file into your React application as a module. Prerequisites:React JSFunctional Component in Re

DOCX to PDF Converter using Express

In this article, we are going to create a Document Conversion Application that converts DOCX to PDF. We will follow step by step approach to do it. We also make use of third-party APIs. Prerequisites:Express JS multernpm Preview of the final output: Let us have a look at how the final output will lo

How to generate PDF file from external text files using PHP ?

In this article, we will learn how to generate PDF files from external text files with PHP by using FPDF. It is a free PHP class that contains many functions for creating and modifying PDFs. The FPDF class includes many features like page formats, page headers, footers, automatic page break, line br

PHP | FPDF-PDF Generator

FPDF is a PHP class which allows generating PDF files with PHP code. It is free to use and it does not require any API keys. FPDF stands for Free PDF. It means that any kind of modification can be done in PDF files. The main features of this class are: Allows to setup page format and margins. Allows

Creating a PDF Merger using Javascript and Express Js

Certain forms require us to upload multiple documents as a single PDF file. We merge those files using any online PDF merger in such cases. This article focuses on creating our own PDF merger using Javascript and Express JS. Prerequisites:NPM and Node JsExpress JsSyntax: import PDFMerger from 'pdf-m