Generating PDF Reports in TypeScript

Generating PDF Reports in TypeScript: Library Overview and Practical Examples

Generating PDF documents is one of the key tasks in developing modern web applications and enterprise systems. Reports, invoices, certificates, analytical dashboards — all of these require a convenient and flexible tool for creating PDF on the server or client side. TypeScript, as a strictly typed superset of JavaScript, provides excellent capabilities for implementing such functionality. In this article, we will review the main libraries for generating PDF in TypeScript, their features, advantages, and usage examples.

Why Use TypeScript for PDF Generation?

TypeScript adds static typing, which significantly simplifies the development of complex report generation systems. The IDE provides autocompletion, type checking, and refactoring, which reduces the number of errors. Additionally, TypeScript code is easy to maintain and scale, especially in large projects.

Main Libraries for Generating PDF in TypeScript

Let's look at three of the most popular tools: PDFKit, jsPDF, and Puppeteer. Each has its own niche and features.

1. PDFKit

PDFKit is a powerful library for creating PDF documents on Node.js. It is entirely written in JavaScript and supports TypeScript through type definitions (@types/pdfkit). PDFKit allows you to create documents from scratch, adding text, images, vector graphics, tables, and much more.

Advantages:

Full control over PDF content and structure.
Support for fonts, colors, transparency.
Built-in support for Cyrillic (when fonts are loaded).
High performance.

Example of using PDFKit with TypeScript:

import PDFDocument from 'pdfkit';import * as fs from 'fs';

const doc = new PDFDocument();doc.pipe(fs.createWriteStream('report.pdf'));

doc.fontSize(25).text('Sales Report', 100, 100);doc.fontSize(12).text('Date: 2025-03-15', 100, 150);doc.moveDown();

doc.text('Product: Laptop');doc.text('Quantity: 10');doc.text('Amount: 1,200,000 RUB');

doc.end();

For correct work with Cyrillic, you need to load a font, for example:

doc.registerFont('Roboto', 'fonts/Roboto-Regular.ttf');doc.font('Roboto').text('Hello, world!');

2. jsPDF

jsPDF is a client-side library for generating PDF directly in the browser. It also has types for TypeScript. jsPDF is great for creating simple reports, invoices, and waybills without server-side processing.

Advantages:

Works on the client side (no server needed).
Simple setup and usage.
Support for HTML layout via the html2canvas plugin.

Example of using jsPDF with TypeScript:

import { jsPDF } from 'jspdf';

const doc = new jsPDF();doc.setFontSize(18);doc.text('Project Report', 10, 20);doc.setFontSize(12);doc.text('Completed: 75%', 10, 40);doc.text('Budget: 2,500,000 RUB', 10, 50);

doc.save('project-report.pdf');

Important: jsPDF does not support Cyrillic "out of the box". To work with Russian text, you need to load fonts via addFileToVFS and addFont.

3. Puppeteer

Puppeteer is a library for controlling the Chrome/Chromium browser via the DevTools protocol. It allows you to generate PDF from HTML/CSS with maximum accuracy, as it uses real browser rendering. Puppeteer has official TypeScript types.

Advantages: