Generate PDF in ElectronJS

Electron is a popular framework for building cross-platform desktop applications using JavaScript, HTML, and CSS. One common requirement in desktop applications is the ability to generate PDF documents programmatically.

In this article, we will explore how to generate PDF files in Electron using the jsPDF library. We will cover the basics of PDF generation, installation steps, and various customization options to create professional-looking documents.

PDF (Portable Document Format) is a file format developed by Adobe Systems that preserves document formatting across different platforms and devices. PDF files can contain text, images, tables, and other elements while maintaining consistent appearance regardless of the operating system or software used to view them.

Installing jsPDF

The jsPDF library is a popular JavaScript library for generating PDF files client-side. To install it in your Electron project, run the following command:

npm install jspdf

Basic PDF Generation

Here's a simple example of creating a PDF file with basic text content:

const { jsPDF } = require("jspdf");

// Create a new PDF document
const doc = new jsPDF();

// Add text to the document
doc.text('Welcome Home!', 15, 15);

// Save the PDF file
doc.save('demo_document.pdf');

This code creates a new PDF document, adds the text "Welcome Home!" at position (15, 15), and saves it as "demo_document.pdf" in the current directory.

Setting Document Properties

You can customize document metadata using the setProperties method:

const { jsPDF } = require('jspdf');

const doc = new jsPDF();

// Set document properties
doc.setProperties({
    title: 'My Document',
    subject: 'Sample PDF Document',
    author: 'Your Name',
    keywords: 'electron, pdf, javascript',
    creator: 'Electron App'
});

doc.text('Welcome Home!', 10, 10);
doc.save('demo_document.pdf');

Customizing Page Layout

Setting Margins

Control the document margins using the margin parameters in the constructor or positioning:

const { jsPDF } = require('jspdf');

// Create PDF with custom format and margins
const doc = new jsPDF({
    orientation: 'portrait',
    unit: 'mm',
    format: 'a4'
});

// Add content with margin consideration
doc.text('Welcome Home!', 20, 20); // 20mm from left and top
doc.save('demo_document.pdf');

Font Customization

Customize text appearance using font settings:

const { jsPDF } = require('jspdf');

const doc = new jsPDF();

// Set font properties
doc.setFont('helvetica', 'bold');
doc.setFontSize(16);
doc.text('Bold Helvetica Text', 10, 20);

// Change font style
doc.setFont('times', 'italic');
doc.setFontSize(12);
doc.text('Italic Times Text', 10, 35);

doc.save('demo_document.pdf');

Adding Images

Include images in your PDF using the addImage method:

const { jsPDF } = require('jspdf');
const fs = require('fs');

const doc = new jsPDF();

// Read image file (base64 encoding required)
const imageData = fs.readFileSync('path/to/image.png', 'base64');

// Add image to PDF
doc.addImage(imageData, 'PNG', 15, 15, 50, 50);

doc.save('demo_document.pdf');

Creating Tables

For table functionality, you'll need the jsPDF AutoTable plugin:

npm install jspdf-autotable

Then use it to create tables:

const { jsPDF } = require('jspdf');
require('jspdf-autotable');

const doc = new jsPDF();

const tableData = [
    ['John', '30', 'New York'],
    ['Jane', '25', 'Chicago'],
    ['Bob', '35', 'Los Angeles']
];

doc.autoTable({
    head: [['Name', 'Age', 'City']],
    body: tableData,
    startY: 20,
    styles: {
        fontSize: 10,
        cellPadding: 5
    }
});

doc.save('demo_document.pdf');

Complete Example

Here's a comprehensive example combining multiple features:

const { jsPDF } = require('jspdf');
require('jspdf-autotable');

const doc = new jsPDF();

// Set document properties
doc.setProperties({
    title: 'Employee Report',
    author: 'HR Department'
});

// Add title
doc.setFont('helvetica', 'bold');
doc.setFontSize(18);
doc.text('Employee Report', 20, 20);

// Add subtitle
doc.setFont('helvetica', 'normal');
doc.setFontSize(12);
doc.text('Generated on: ' + new Date().toDateString(), 20, 30);

// Add table
const employeeData = [
    ['Alice Johnson', 'Developer', '$75,000'],
    ['Bob Smith', 'Designer', '$65,000'],
    ['Carol Davis', 'Manager', '$85,000']
];

doc.autoTable({
    head: [['Name', 'Position', 'Salary']],
    body: employeeData,
    startY: 40,
    styles: {
        fontSize: 10,
        cellPadding: 8
    },
    headStyles: {
        fillColor: [66, 139, 202]
    }
});

doc.save('employee_report.pdf');

Conclusion

The jsPDF library provides a powerful and flexible way to generate PDF documents in Electron applications. With features like custom fonts, images, tables, and document properties, you can create professional documents tailored to your application's needs. This makes PDF generation an excellent solution for reports, invoices, and document export functionality in desktop applications.