Comment générer et modifier des fichiers PDF avec JavaScript : guide complet, bibliothèques et exemples pratiques

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction : Pourquoi devons‑nous gérer les PDF en JavaScript ?

L’importance du traitement des PDF et le rôle de JavaScript

Ces dernières années, le PDF est devenu un format de fichier indispensable tant dans le monde professionnel que personnel. Contrats, reçus, factures et rapports sont désormais couramment créés au format PDF. En conséquence, le besoin d’automatiser la création et la modification de fichiers PDF a augmenté dans de nombreux environnements de développement.
JavaScript s’exécute directement dans le navigateur et excelle dans les opérations dynamiques côté client. Exploiter ces capacités rend possible la génération et la modification efficaces de fichiers PDF. En particulier, la possibilité de traiter les PDF entièrement côté client — sans faire intervenir un serveur — a suscité un intérêt considérable.

Avantages de l’utilisation de JavaScript pour le traitement des PDF

1. Réduction de la charge serveur

Traditionnellement, la génération et la modification de PDF étaient effectuées côté serveur. En utilisant JavaScript, le traitement peut être réalisé côté client, réduisant ainsi fortement la charge des serveurs.

2. Traitement en temps réel

Avec JavaScript, les saisies utilisateur peuvent être immédiatement reflétées dans un PDF. Par exemple, les données d’un formulaire peuvent être instantanément converties en PDF et proposées via un lien de téléchargement.

3. Grande flexibilité et personnalisation

Grâce aux bibliothèques JavaScript, il est facile de créer des PDF hautement personnalisables avec des graphiques, des images ou du texte formaté. Comme JavaScript fonctionne sur la plupart des navigateurs modernes, les problèmes spécifiques à un environnement sont également minimisés.

Cas d’utilisation pratiques

1. Génération de documents professionnels

Il est possible de générer automatiquement des factures et des reçus, qui peuvent ensuite être envoyés par e‑mail. Vous pouvez également produire instantanément des documents personnalisés pour chaque client, améliorant ainsi l’efficacité.

2. Exportation de données de formulaires

Vous pouvez implémenter des fonctionnalités qui enregistrent les réponses à des enquêtes ou les données de formulaires de candidature sous forme de PDF et les intègrent dans un système de gestion. Cela facilite la transition du traitement papier vers des flux de travail numériques.

3. Création de rapports et de supports de présentation

Des rapports peuvent être générés dynamiquement à partir de données, incluant graphiques et images. Cela réduit considérablement le temps nécessaire à la préparation de documents pour des réunions ou des présentations.

Tendances futures et perspectives

Le traitement des PDF basé sur JavaScript devrait continuer à évoluer. Deux grandes tendances attirent l’attention :

1. Intégration cloud renforcée – L’intégration transparente avec le stockage cloud ou les bases de données augmentera la demande d’applications web disposant de capacités intégrées de création et d’édition de PDF.
2. Support mobile amélioré – À mesure que l’utilisation des smartphones et des tablettes devient plus importante, la génération de PDF optimisée pour les mises en page réactives continuera de progresser.

2. Top 5 des bibliothèques JavaScript pour PDF (avec tableau comparatif)

L’importance de choisir la bonne bibliothèque JavaScript pour les PDF

Choisir la bonne bibliothèque est crucial lorsqu’on génère ou modifie des PDF avec JavaScript. Une bibliothèque bien sélectionnée améliore l’efficacité du développement et permet une personnalisation avancée, y compris la prise en charge du texte japonais. Cette section présente cinq bibliothèques PDF majeures et compare leurs fonctionnalités et cas d’utilisation.

1. PDF.js

Vue d’ensemble

PDF.js est une bibliothèque open‑source de visualisation de PDF développée par Mozilla. Elle se spécialise dans le rendu de PDF directement dans le navigateur.

Fonctionnalités

• Visionneuse uniquement : Axée uniquement sur l’affichage ; ne prend pas en charge la génération ou la modification de PDF.
• Haute compatibilité : Fonctionne uniquement avec HTML5 et JavaScript — aucun plugin requis.
• Performance élevée : Rendu rapide et gestion efficace des documents volumineux.

Cas d’utilisation

• Applications nécessitant la visualisation de PDF, comme les livres numériques ou les contrats.

2. jsPDF

Vue d’ensemble

jsPDF est une bibliothèque légère principalement utilisée pour générer des fichiers PDF. Elle permet d’insérer facilement du texte, des images et des tableaux, ce qui la rend idéale pour la création de documents simples.

Fonctionnalités

• Génération de PDF : Bien adaptée à la création de PDF côté client.
• Extensible : Prend en charge des plugins pour des fonctionnalités supplémentaires.
• Prise en charge du japonais : Supportée grâce à la configuration de polices.

Cas d’utilisation

• Génération automatique de reçus, factures ou rapports simples.

3. pdf-lib

Vue d’ensemble

pdf-lib prend en charge non seulement la génération de PDF mais aussi l’édition et la fusion. Il est compatible avec TypeScript et s’intègre parfaitement aux environnements de développement modernes.

Fonctionnalités

• Capacités d’édition : Ajouter du texte ou des images aux PDF existants.
• Personnalisation flexible : Permet l’intégration de polices et le contrôle de la mise en page.
• Haute performance : Efficace même pour des opérations PDF à grande échelle.

Cas d’utilisation

• Création de formulaires PDF ou de rapports de données dynamiques.

4. pdfmake

Vue d’ensemble

pdfmake permet une spécification facile de la mise en page grâce à une API déclarative, ce qui le rend idéal pour les conceptions complexes et les mises en page de tableaux.

Fonctionnalités

• Capacités de mise en page solides : Configuration facile des tableaux et du style.
• Support multilingue : Prend en charge les polices japonaises de base.
• Basé sur JSON : Facile à créer des documents dynamiques.

Cas d’utilisation

• Rapports, catalogues et documents contenant des tableaux.

5. html2pdf

Vue d’ensemble

html2pdf convertit directement les éléments HTML en fichiers PDF. Il est idéal pour générer des PDF à partir de conceptions de pages Web existantes.

Fonctionnalités

• Basé sur HTML : Conserve la conception HTML/CSS dans la sortie PDF.
• Facile à utiliser : Configuration rapide pour une sortie simple.
• Adapté aux appareils mobiles : Conserve la mise en page sur les appareils mobiles.

Cas d’utilisation

• Fonctionnalités d’impression pour les pages Web ou sortie PDF à mise en page fixe.

6. Tableau comparatif

Résumé

Chaque bibliothèque JavaScript PDF a des points forts différents :

• PDF.js : Meilleur pour la visualisation uniquement.
• jsPDF : Meilleur pour la génération de PDF simple.
• pdf-lib : Idéal pour l’édition ou l’ajout de fonctionnalités complexes.
• pdfmake : Solide pour la conception de tableaux et de mises en page personnalisées.
• html2pdf : Le meilleur lorsque vous souhaitez conserver la conception HTML.

3. Exemples d’implémentation : Génération et édition de PDF avec JavaScript

Introduction

JavaScript permet une génération et une édition de PDF côté client faciles. Cette section présente des implémentations concrètes utilisant les principales bibliothèques. Essayez d’exécuter ces exemples de code pour comprendre leur fonctionnement.

1. Génération de PDF de base avec jsPDF

Création d’un PDF texte simple

const doc = new jsPDF();
doc.text("Hello, PDF!", 10, 10);
doc.save("sample.pdf");

Points clés

1. Créer une instance :

• new jsPDF() crée un nouveau document PDF.

1. Ajouter du texte :

• doc.text() place « Hello, PDF! » aux coordonnées (10, 10).

1. Enregistrer le PDF :

• doc.save() télécharge le PDF sous le nom « sample.pdf ».

Exemple : Ajout d’une image

const doc = new jsPDF();
const imgData = 'data:image/jpeg;base64,...';
doc.addImage(imgData, 'JPEG', 10, 40, 180, 160);
doc.save("image-sample.pdf");

2. Édition de PDF avec pdf-lib

Ajout de texte à un PDF existant

import { PDFDocument } from 'pdf-lib';

async function modifyPDF() {
  const url = 'sample.pdf';
  const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer());
  const pdfDoc = await PDFDocument.load(existingPdfBytes);
  const pages = pdfDoc.getPages();
  const firstPage = pages[0];

  firstPage.drawText('追加されたテキスト', { x: 50, y: 500, size: 20 });

  const pdfBytes = await pdfDoc.save();
  download(pdfBytes, "modified-sample.pdf", "application/pdf");
}

Points clés

1. Charger le PDF :

• Utilisez PDFDocument.load() .

1. Éditer le PDF :

• drawText() ajoute du texte à l’emplacement spécifié.

1. Enregistrer & télécharger :

• Enregistrez le PDF édité et téléchargez-le.

3. Création de PDF à mise en page lourde avec pdfmake

Création de mises en page complexes

const docDefinition = {
  content: [
    { text: 'レポートタイトル', style: 'header' },
    { text: '以下はサンプル表です。' },
    {
      table: {
        body: [
          ['項目1', '項目2', '項目3'],
          ['データ1', 'データ2', 'データ3'],
          ['データ4', 'データ5', 'データ6'],
        ],
      },
    },
  ],
  styles: {
    header: {
      fontSize: 18,
      bold: true,
      margin: [0, 0, 0, 10],
    },
  },
};
pdfMake.createPdf(docDefinition).download('sample-table.pdf');

Points clés

1. Définir le contenu : Les tableaux et le texte sont définis dans content .
2. Définition du style : styles contrôle les paramètres de police et de mise en page.
3. Téléchargement : Utilisez download() pour générer le PDF.

4. Prise en charge des polices japonaises (jsPDF)

const doc = new jsPDF();
doc.addFileToVFS('NotoSansJP-Regular.ttf', fontData);
doc.addFont('NotoSansJP-Regular.ttf', 'NotoSansJP', 'normal');
doc.setFont('NotoSansJP');
doc.text('日本語対応テスト', 10, 10);
doc.save("japanese-sample.pdf");

Résumé

Cette section a présenté des exemples pratiques utilisant les principales bibliothèques :

• jsPDF : Création simple de PDF et insertion d’images.
• pdf-lib : Modification de PDF existants et manipulation de pages.
• pdfmake : Personnalisation puissante des tableaux et de la mise en page, avec un support partiel du japonais.

4. Gestion des polices japonaises et dépannage

Introduction

Lors de la génération de PDF en JavaScript, la gestion des polices japonaises est l’un des défis les plus courants. Les problèmes tels que les caractères illisibles ou les glyphes manquants surviennent fréquemment. Cette section explique comment configurer correctement les polices japonaises et comment dépanner les problèmes courants.

1. Problèmes courants avec les polices japonaises

Pourquoi l’intégration des polices est nécessaire

Les PDF basés sur l’anglais s’affichent généralement correctement avec les polices par défaut, mais le japonais nécessite une gestion spéciale parce que :

• Les polices japonaises contiennent de nombreux caractères non disponibles dans les polices par défaut.
• Certaines bibliothèques offrent un support limité des polices japonaises.
• Sans intégration des polices, les PDF peuvent s’afficher incorrectement selon l’environnement.

Erreurs courantes

• Caractères corrompus : Affichés comme □ ou ? en raison d’un manque de support de police.
• Mise en page cassée : Espacement de ligne ou taille de police incorrects.
• Erreurs de chargement de police : Le fichier de police personnalisé ne peut pas être chargé.

2. Gestion des polices japonaises dans jsPDF

Préparation des fichiers de police

Pour intégrer des polices japonaises, vous avez besoin d’une police TrueType (.ttf). Exemple : Noto Sans JP.

1. Télécharger : Obtenez Noto Sans JP depuis Google Fonts.
2. Convertir en Base64 : Convertissez le fichier de police en chaîne Base64.

Exemple de code

const doc = new jsPDF();
doc.addFileToVFS('NotoSansJP-Regular.ttf', fontData);
doc.addFont('NotoSansJP-Regular.ttf', 'NotoSansJP', 'normal');
doc.setFont('NotoSansJP');
doc.text('こんにちは、世界！', 10, 10);
doc.save('japanese-sample.pdf');

Explication

• addFileToVFS : Enregistre les données de police en Base64.
• addFont : Définit le nom et le style de la police.
• setFont : Applique la police.

3. Gestion des polices japonaises dans pdfmake

Préparation et configuration des polices

var fonts = {
  Roboto: {
    normal: 'Roboto-Regular.ttf',
    bold: 'Roboto-Bold.ttf',
    italics: 'Roboto-Italic.ttf',
    bolditalics: 'Roboto-BoldItalic.ttf',
  },
};

var docDefinition = {
  content: [
    { text: '日本語テスト', font: 'Roboto', fontSize: 14 },
    { text: 'Hello, World!', fontSize: 12 },
  ],
};

pdfMake.createPdf(docDefinition).download('japanese-sample.pdf');

Explication

• Chaque style de police doit être configuré séparément.
• La propriété font est utilisée pour spécifier les polices dans le contenu.

4. Dépannage

Texte qui ne s’affiche pas correctement

• Cause possible : Fichier de police incorrect ou conversion Base64 erronée.
• Solutions :

1. Confirmer l’intégration Base64.
2. Vérifier l’intégrité du fichier .ttf.
3. S’assurer que le type MIME est correct.

Mise en page cassée

• Cause : Espacement de ligne incorrect.
• Solution : Définir manuellement fontSize et lineHeight .

Problèmes d’encodage mobile

• Cause : L’appareil ne possède pas de polices japonaises.
• Solution : Toujours intégrer les polices.

Résumé

• jsPDF : Intégration simple de police via Base64.
• pdfmake : Contrôle puissant de la mise en page mais nécessite une configuration détaillée des polices.

5. Techniques avancées et solutions d’utilisation

Introduction

Les bibliothèques PDF en JavaScript peuvent prendre en charge des cas d’utilisation avancés tels que la génération dynamique de PDF, l’intégration de bases de données, les mises en page personnalisées, etc.

1. Génération de PDF à partir de données dynamiques

Générer des rapports à partir de JSON

const doc = new jsPDF();
const data = [
  { 名前: "山田太郎", 年齢: 30, 職業: "エンジニア" },
  { 名前: "佐藤花子", 年齢: 25, 職業: "デザイナー" },
  { 名前: "田中一郎", 年齢: 40, 職業: "マネージャー" },
];
doc.text('ユーザーレポート', 10, 10);
doc.autoTable({
  head: [['名前', '年齢', '職業']],
  body: data.map(item => [item.名前, item.年齢, item.職業]),
});
doc.save('report.pdf');

Points clés

• Données dynamiques : Convertir le JSON en lignes de tableau.
• Gestion de la mise en page : Utiliser le plugin autoTable pour créer facilement des tableaux.

2. Fusion et division de PDFs

Fusion de plusieurs PDFs (pdf-lib)

import { PDFDocument } from 'pdf-lib';

async function mergePDFs(pdfUrls) {
  const mergedPdf = await PDFDocument.create();

  for (let url of pdfUrls) {
    const existingPdf = await fetch(url).then(res => res.arrayBuffer());
    const pdfDoc = await PDFDocument.load(existingPdf);
    const copiedPages = await mergedPdf.copyPages(pdfDoc, pdfDoc.getPageIndices());
    copiedPages.forEach(page => mergedPdf.addPage(page));
  }

  const pdfBytes = await mergedPdf.save();
  download(pdfBytes, "merged.pdf", "application/pdf");
}

Points clés

• Copier les pages de plusieurs PDFs.
• Fusionner en un seul document.

3. Champs de formulaire PDF

Création de champs de saisie (pdf-lib)

import { PDFDocument } from 'pdf-lib';

async function createForm() {
  const pdfDoc = await PDFDocument.create();
  const page = pdfDoc.addPage([500, 700]);

  const form = pdfDoc.getForm();
  const nameField = form.createTextField('name');
  nameField.setText('名前を入力してください');
  nameField.addToPage(page, { x: 50, y: 600, width: 300, height: 30 });

  const pdfBytes = await pdfDoc.save();
  download(pdfBytes, "form.pdf", "application/pdf");
}

Points clés

• Prend en charge la saisie dynamique de l’utilisateur.
• Les données du champ peuvent être utilisées pour un traitement ultérieur.

4. Dispositions personnalisées

En-tête & pied de page (pdfmake)

const docDefinition = {
  header: { text: 'レポートヘッダー', alignment: 'center', margin: [0, 10, 0, 0] },
  footer: function(currentPage, pageCount) {
    return { text: `${currentPage} / ${pageCount}`, alignment: 'right', margin: [0, 0, 10, 0] };
  },
  content: [
    { text: 'レポート本文', fontSize: 12 },
  ],
};
pdfMake.createPdf(docDefinition).download('custom-layout.pdf');

5. Support mobile et réactif

Générer un PDF à partir de HTML (html2pdf)

const element = document.getElementById('content');
html2pdf(element);

Résumé

Techniques avancées clés :

• Données dynamiques : Créer des PDFs à partir de JSON.
• Fusion/édition : Utiliser pdf-lib pour une édition avancée.
• Champs de formulaire : Créer des documents interactifs.
• Design personnalisé : Utiliser pdfmake pour des documents riches en mise en page.

6. Foire aux questions (FAQ)

Introduction

Cette section répond aux questions courantes que les développeurs rencontrent lors de la génération ou de l’édition de PDFs en JavaScript.

1. Opérations de base

Q1. Quelle bibliothèque est la meilleure pour générer des PDFs en JavaScript ?

R : Choisissez en fonction de vos besoins :

• Génération de PDF simple : jsPDF
• Édition & fusion : pdf-lib
• Mises en page complexes : pdfmake
• HTML vers PDF : html2pdf

Q2. Comment afficher correctement le texte japonais ?

R : Suivez ces étapes :

1. Préparez une police japonaise (Noto Sans JP, IPA, etc.)
2. Convertissez la police en Base64
3. Intégrez-la en utilisant addFileToVFS() et addFont()
4. Sélectionnez-la avec setFont()

Q3. Pourquoi le texte japonais se casse-t-il sur les appareils mobiles ?

R : Les appareils mobiles n’ont pas de polices japonaises.
Solution : Intégrez toujours les polices japonaises.

Q4. Comment ajouter un champ de signature ?

R : Vous pouvez insérer une image de signature en utilisant pdf-lib :

page.drawImage(imgData, {
  x: 50,
  y: 100,
  width: 200,
  height: 100,
});

2. Utilisation avancée

Q5. Puis-je insérer des QR codes dynamiques dans les PDFs ?

R : Oui, en utilisant jsPDF.

Q6. Puis-je exporter des formulaires HTML en PDF ?

R : Oui, avec html2pdf.

Résumé

Cette FAQ devrait vous aider à dépanner et optimiser votre flux de travail PDF en JavaScript.

7. Conclusion

Introduction

Cet article fournit une explication approfondie sur la façon de générer et de modifier des PDF avec JavaScript, couvrant les opérations de base, les techniques avancées, les comparaisons de bibliothèques et la gestion des polices japonaises.

1. Commodité et flexibilité des opérations PDF basées sur JavaScript

JavaScript s’exécute côté client, permettant la génération et la modification de PDF en temps réel. Cela réduit la charge du serveur et prend en charge les fonctionnalités interactives.

Avantages :

• Réduction de la dépendance au serveur
• Interaction et aperçu en temps réel
• Grande compatibilité avec les navigateurs modernes

2. Résumé de la sélection des bibliothèques

3. Résumé des exemples d’implémentation

• Création de PDF de base
• Rapports de données dynamiques
• Modification de PDF existants
• Gestion des polices japonaises
• Contrôle personnalisé du design et de la mise en page

4. Perspectives futures

L’écosystème des PDF JavaScript continuera d’évoluer :

1. Intégration cloud améliorée
2. Génération de documents assistée par IA
3. Nouvelles bibliothèques pour la rapidité et l’évolutivité

Conclusion

JavaScript devient de plus en plus essentiel pour le traitement des PDF dans les applications web et les systèmes d’entreprise. En tirant parti des bibliothèques et des techniques présentées dans cet article, vous pouvez mettre en œuvre des solutions PDF flexibles et de haute qualité avec facilité.