Génération de rapports PDF en TypeScript : la bibliothèque pdf-lib

Génération de rapports PDF en TypeScript avec la bibliothèque pdf-lib

Dans le développement web moderne, il est souvent nécessaire de créer des documents au format PDF — des simples reçus et quittances aux rapports analytiques complexes avec graphiques. TypeScript, en tant qu'extension fortement typée de JavaScript, offre d'excellentes possibilités pour travailler avec les PDF. Parmi les nombreuses bibliothèques, pdf-lib se distingue — un outil puissant, entièrement côté client, ne nécessitant aucune dépendance serveur.

Dans cet article, nous allons voir en détail comment utiliser pdf-lib pour générer des rapports PDF en TypeScript, y compris l'installation, les opérations de base et les techniques avancées.

Qu'est-ce que pdf-lib ?

pdf-lib est une bibliothèque open source écrite en TypeScript qui permet de créer et de modifier des documents PDF directement dans le navigateur ou dans un environnement Node.js. Ses principaux avantages :

• Prise en charge complète de TypeScript (tous les types inclus)
• Fonctionne sans dépendances externes (pas besoin de Puppeteer ou wkhtmltopdf)
• Possibilité de travailler avec des PDF existants (fusion, insertion de pages)
• Prise en charge du cyrillique et de toutes les polices
• Intégration d'images (PNG, JPG, SVG)
• Création de formulaires et d'annotations

Installation et configuration

L'installation se fait avec le gestionnaire de paquets standard :

npm install pdf-lib# ouyarn add pdf-lib

Pour travailler avec TypeScript, aucune action supplémentaire n'est nécessaire — tous les types sont déjà inclus dans le paquet.

Exemple de base : création d'un rapport simple

Voyons la création d'un document PDF minimal avec un titre et du texte :

import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';

async function createSimpleReport() {  // 1. Créer un nouveau document PDF  const pdfDoc = await PDFDocument.create();    // 2. Ajouter une page (format A4 : 595,28 x 841,89 points)  const page = pdfDoc.addPage([595.28, 841.89]);    // 3. Charger la police standard  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);    // 4. Dessiner le titre  page.drawText('Rapport des ventes pour le T1 2025', {    x: 50,    y: 800,    size: 24,    font: font,    color: rgb(0, 0.2, 0.6),  });    // 5. Dessiner le texte principal  page.drawText('Chiffre d\'affaires total : 1 234 567 roubles.', {    x: 50,    y: 760,    size: 14,    font: font,    color: rgb(0, 0, 0),  });    // 6. Enregistrer le document dans un Uint8Array  const pdfBytes = await pdfDoc.save();  return pdfBytes;}

Travail avec les tableaux et les données

Pour créer des rapports sous forme de tableaux, un peu plus de logique est nécessaire. Voici un exemple de génération d'un tableau avec des données :

import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';

interface SaleRecord {  product: string;  quantity: number;  price: number;}

async function createTableReport(data: SaleRecord[]) {  const pdfDoc = await PDFDocument.create();  const page = pdfDoc.addPage([595.28, 841.89]);  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);  const boldFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);    const startX = 50;  let startY = 800;  const rowHeight = 25;  const colWidths = [200, 100, 100, 100]; // Nom, Quantité, Prix, Total    // En-tête du tableau  const headers = ['Nom', 'Quantité', 'Prix', 'Total'];  page.drawText(headers[0], { x: startX, y: startY, size: 12, font: boldFont });  page.drawText(headers[1], { x: startX + colWidths[0], y: startY, size: 12, font: boldFont });  page.drawText(headers[2], { x: startX + colWidths[0] + colWidths[1], y: startY, size: 12, font: boldFont });  page.drawText(headers[3], { x: startX + colWidths[0] + colWidths[1] + colWidths[2], y: startY, size: 12, font: boldFont });    startY -= rowHeight;    // Lignes de données  for (const record of data) {    const total = reco