PDF-Dateien mit JavaScript erstellen und bearbeiten: Komplettanleitung, Bibliotheken und praktische Beispiele

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

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

1. Einführung: Warum müssen wir PDFs in JavaScript verarbeiten?

Die Bedeutung der PDF‑Verarbeitung und die Rolle von JavaScript

In den letzten Jahren hat sich PDF zu einem unverzichtbaren Dateiformat sowohl im geschäftlichen als auch im privaten Bereich entwickelt. Verträge, Quittungen, Rechnungen und Berichte werden heute häufig im PDF‑Format erstellt. Dadurch ist der Bedarf an automatisierter Erstellung und Bearbeitung von PDF‑Dateien in vielen Entwicklungsumgebungen gestiegen.
JavaScript läuft direkt im Browser und eignet sich hervorragend für dynamische clientseitige Operationen. Diese Fähigkeiten zu nutzen, ermöglicht es, PDF‑Dateien effizient zu erzeugen und zu bearbeiten. Insbesondere die Möglichkeit, PDFs vollständig auf der Client‑Seite zu verarbeiten – ohne einen Server einzubeziehen – hat große Aufmerksamkeit erhalten.

Vorteile der Verwendung von JavaScript für die PDF‑Verarbeitung

1. Reduzierte Serverlast

Traditionell wurden PDF‑Erstellung und -Bearbeitung serverseitig durchgeführt. Durch den Einsatz von JavaScript kann die Verarbeitung jedoch auf der Client‑Seite abgeschlossen werden, wodurch die Belastung der Server erheblich reduziert wird.

2. Echtzeit‑Verarbeitung

Mit JavaScript kann die Benutzereingabe sofort in ein PDF übernommen werden. Beispielsweise können Formulardaten sofort in ein PDF umgewandelt und als Download‑Link bereitgestellt werden.

3. Hohe Flexibilität und Anpassbarkeit

Durch JavaScript‑Bibliotheken lassen sich leicht stark anpassbare PDFs mit Grafiken, Bildern oder formatiertem Text erstellen. Da JavaScript in den meisten modernen Browsern funktioniert, werden umgebungsspezifische Probleme ebenfalls minimiert.

Praktische Anwendungsfälle

1. Erstellung von Geschäftsdokumenten

Automatisches Generieren von Rechnungen und Quittungen, die anschließend per E‑Mail verschickt werden können. Außerdem können Dokumente sofort individuell für jeden Kunden ausgegeben werden, was die Effizienz steigert.

2. Ausgabe von Formulardaten

Funktionen implementieren, die Umfrage‑ oder Antragsformulardaten als PDFs speichern und in ein Verwaltungssystem einpflegen. Das unterstützt den Übergang von papierbasierten Prozessen zu digitalen Workflows.

3. Erstellung von Berichten und Präsentationsmaterialien

Berichte können dynamisch anhand von Daten erzeugt werden, inklusive Diagrammen und Bildern. Das reduziert die Zeit, die für die Vorbereitung von Materialien für Meetings oder Präsentationen benötigt wird, erheblich.

Zukunftstrends und Ausblick

Die JavaScript‑basierte PDF‑Verarbeitung wird voraussichtlich weiterentwickelt. Zwei wichtige Trends erhalten besondere Aufmerksamkeit:

1. Stärkere Cloud‑Integration – Nahtlose Anbindung an Cloud‑Speicher oder Datenbanken wird die Nachfrage nach Web‑Apps mit integrierter PDF‑Erstellung und -Bearbeitung erhöhen.
2. Verbesserte mobile Unterstützung – Da die Nutzung von Smartphones und Tablets immer wichtiger wird, wird die PDF‑Erstellung für responsive Layouts weiter voranschreiten.

2. Top 5 JavaScript‑PDF‑Bibliotheken (mit Vergleichstabelle)

Die Bedeutung der richtigen Wahl einer JavaScript‑PDF‑Bibliothek

Die richtige Bibliothek zu wählen ist entscheidend, wenn PDFs mit JavaScript erzeugt oder bearbeitet werden sollen. Eine gut ausgewählte Bibliothek steigert die Entwicklungseffizienz und ermöglicht erweiterte Anpassungen, einschließlich Unterstützung für japanischen Text. Dieser Abschnitt stellt fünf bedeutende PDF‑Bibliotheken vor und vergleicht ihre Funktionen und Anwendungsfälle.

1. PDF.js

Überblick

PDF.js ist eine von Mozilla entwickelte Open‑Source‑PDF‑Viewer‑Bibliothek. Sie spezialisiert sich auf das Rendern von PDFs im Browser.

Funktionen

• Nur Viewer: Konzentriert sich ausschließlich auf die Anzeige; unterstützt weder PDF‑Erstellung noch -Bearbeitung.
• Hohe Kompatibilität: Arbeitet ausschließlich mit HTML5 und JavaScript – keine Plugins nötig.
• Hohe Performance: Schnelles Rendern und effiziente Handhabung großer Dokumente.

Anwendungsfälle

• Anwendungen, die das Anzeigen von PDFs benötigen, z. B. E‑Books oder Verträge.

2. jsPDF

Überblick

jsPDF ist eine leichtgewichtige Bibliothek, die hauptsächlich zur Generierung von PDF‑Dateien verwendet wird. Sie ermöglicht das einfache Einfügen von Text, Bildern und Tabellen und ist damit ideal für die Erstellung einfacher Dokumente.

Funktionen

• PDF‑Erstellung: Gut geeignet für die clientseitige PDF‑Generierung.
• Erweiterbar: Unterstützt Plugins für zusätzliche Features.
• Japanische Unterstützung: Durch Schriftart‑Konfiguration unterstützt.

Anwendungsfälle

• Automatische Erstellung von Quittungen, Rechnungen oder einfachen Berichten.

3. pdf-lib

Übersicht

pdf-lib unterstützt nicht nur die PDF-Erstellung, sondern auch das Bearbeiten und Zusammenführen. Es ist mit TypeScript kompatibel und lässt sich nahtlos in moderne Entwicklungsumgebungen integrieren.

Funktionen

• Bearbeitungsfunktionen: Text oder Bilder zu bestehenden PDFs hinzufügen.
• Flexible Anpassung: Bietet Schriftart‑Einbettung und Layout‑Kontrolle.
• Hohe Leistung: Effizient selbst bei groß angelegten PDF‑Operationen.

Anwendungsfälle

• Erstellung von PDF‑Formularen oder dynamischen Datenberichten.

4. pdfmake

Übersicht

pdfmake ermöglicht eine einfache Layout‑Spezifikation mittels einer deklarativen API und ist ideal für komplexe Designs und Tabellenlayouts.

Funktionen

• Starke Layout‑Fähigkeiten: Einfache Tabellen- und Stilkonfiguration.
• Mehrsprachige Unterstützung: Unterstützt grundlegende japanische Schriftarten.
• JSON-basiert: Einfach dynamische Dokumente zu erstellen.

Anwendungsfälle

• Berichte, Kataloge und Dokumente mit Tabellen.

5. html2pdf

Übersicht

html2pdf konvertiert HTML‑Elemente direkt in PDF‑Dateien. Es ist ideal, um PDFs basierend auf bestehenden Webseitendesigns zu erzeugen.

Funktionen

• HTML-basiert: Behält das HTML/CSS‑Design im PDF‑Ausgabe bei.
• Einfach zu benutzen: Schnelle Einrichtung für einfache Ausgaben.
• Responsive‑freundlich: Erhält das Layout auf mobilen Geräten.

Anwendungsfälle

• Druckfunktionen für Webseiten oder PDF‑Ausgabe mit festem Layout.

6. Vergleichstabelle

Zusammenfassung

Jede JavaScript‑PDF‑Bibliothek hat unterschiedliche Stärken:

• PDF.js: Am besten nur zum Anzeigen.
• jsPDF: Am besten für einfache PDF‑Erstellung.
• pdf-lib: Ideal zum Bearbeiten oder Hinzufügen komplexer Funktionen.
• pdfmake: Stark bei Tabellen und benutzerdefiniertem Layout‑Design.
• html2pdf: Am besten, wenn Sie das HTML‑Design beibehalten möchten.

3. Implementierungsbeispiele: PDFs mit JavaScript erzeugen und bearbeiten

Einleitung

JavaScript ermöglicht eine einfache clientseitige PDF‑Erstellung und -Bearbeitung. Dieser Abschnitt stellt konkrete Implementierungen mit den wichtigsten Bibliotheken vor. Versuchen Sie, diese Code‑Beispiele auszuführen, um zu verstehen, wie sie funktionieren.

1. Einfache PDF‑Erstellung mit jsPDF

Erstellung eines einfachen Text‑PDFs

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

Wichtige Punkte

1. Instanz erstellen:

• new jsPDF() erstellt ein neues PDF‑Dokument.

1. Text hinzufügen:

• doc.text() platziert „Hello, PDF!“ bei den Koordinaten (10, 10).

1. PDF speichern:

• doc.save() lädt das PDF als „sample.pdf“ herunter.

Beispiel: Bild hinzufügen

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

2. PDFs mit pdf-lib bearbeiten

Text zu einem bestehenden PDF hinzufügen

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");
}

Wichtige Punkte

1. PDF laden:

• Verwenden Sie PDFDocument.load() .

1. PDF bearbeiten:

• drawText() fügt Text an der angegebenen Stelle hinzu.

1. Speichern & herunterladen:

• Speichern Sie das bearbeitete PDF und laden Sie es herunter.

3. Layout‑intensive PDFs mit pdfmake erstellen

Komplexe Layouts erstellen

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');

Wichtige Punkte

1. Inhalt definieren: Tabellen und Text werden in content definiert.
2. Stildefinition: styles steuert Schrift- und Layouteinstellungen.
3. Download: Verwende download(), um das PDF auszugeben.

4. Japanische Schriftunterstützung (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");

Zusammenfassung

Dieser Abschnitt stellte praktische Beispiele mit wichtigen Bibliotheken vor:

• jsPDF: Einfache PDF-Erstellung und Bildeinfügung.
• pdf-lib: Bearbeiten vorhandener PDFs und Seitenmanipulation.
• pdfmake: Umfangreiche Tabellen- und Layoutanpassung mit teilweiser japanischer Unterstützung.

4. Umgang mit japanischen Schriften & Fehlersuche

Einleitung

Beim Erzeugen von PDFs in JavaScript ist der Umgang mit japanischen Schriften eine der häufigsten Herausforderungen. Probleme wie unlesbare Zeichen oder fehlende Glyphen treten häufig auf. Dieser Abschnitt erklärt, wie man japanische Schriften korrekt konfiguriert und häufige Probleme behebt.

1. Häufige Probleme mit japanischen Schriften

Warum das Einbetten von Schriften notwendig ist

Englisch-basierte PDFs werden normalerweise mit Standardschriften korrekt angezeigt, aber Japanisch erfordert besondere Handhabung, weil:

• Japanische Schriften enthalten viele Zeichen, die in Standardschriften nicht verfügbar sind.
• Einige Bibliotheken haben nur begrenzte Unterstützung für japanische Schriften.
• Ohne das Einbetten von Schriften können PDFs je nach Umgebung falsch dargestellt werden.

Häufige Fehler

• Verfälschte Zeichen: Wird als □ oder ? angezeigt, weil die Schrift fehlt.
• Defektes Layout: Falsche Zeilenabstände oder Schriftgröße.
• Fehler beim Laden der Schrift: Benutzerdefinierte Schriftdatei kann nicht geladen werden.

2. Umgang mit japanischen Schriften in jsPDF

Vorbereiten von Schriftdateien

Um japanische Schriften einzubetten, benötigen Sie eine TrueType (.ttf)-Schrift. Beispiel: Noto Sans JP.

1. Herunterladen: Laden Sie Noto Sans JP von Google Fonts herunter.
2. In Base64 konvertieren: Konvertieren Sie die Schriftdatei in einen Base64-String.

Beispielcode

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');

Erklärung

• addFileToVFS: Registriert Base64-Schriftdaten.
• addFont: Definiert den Schriftname und Stil.
• setFont: Wendet die Schrift an.

3. Umgang mit japanischen Schriften in pdfmake

Vorbereiten und Festlegen von Schriften

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');

Erklärung

• Jeder Schriftstil muss separat konfiguriert werden.
• Die font-Eigenschaft wird verwendet, um Schriften im Inhalt anzugeben.

4. Fehlersuche

Text wird nicht korrekt angezeigt

• Mögliche Ursache: Falsche Schriftdatei oder Base64-Konvertierung.
• Lösungen: 1. Base64-Einbettung bestätigen. 2. Integrität der .ttf-Datei überprüfen. 3. Sicherstellen, dass der MIME-Typ korrekt ist.

Defektes Layout

• Ursache: Falscher Zeilenabstand.
• Lösung: Manuell fontSize und lineHeight definieren.

Mobile Kodierungsprobleme

• Ursache: Gerät hat keine japanischen Schriften.
• Lösung: Schriften immer einbetten.

Zusammenfassung

• jsPDF: Einfaches Einbetten von Schriften mittels Base64.
• pdfmake: Starke Layoutkontrolle, erfordert jedoch detaillierte Schriftkonfiguration.

5. Fortgeschrittene Techniken & Anwendungsfall-Lösungen

Einleitung

PDF-Bibliotheken in JavaScript können fortgeschrittene Anwendungsfälle unterstützen, wie dynamische PDF-Generierung, Datenbankintegration, benutzerdefinierte Layouts und mehr.

1. Dynamische Daten-PDF-Generierung

Berichte aus JSON erzeugen

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');

Wichtige Punkte

• Dynamische Daten: JSON in Tabellenzeilen umwandeln.
• Layoutverwaltung: Verwenden Sie das autoTable‑Plugin für die einfache Tabellenerstellung.

2. PDFs zusammenführen & teilen

Mehrere PDFs zusammenführen (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");
}

Wichtige Punkte

• Seiten aus mehreren PDFs kopieren.
• In ein einziges Dokument zusammenführen.

3. PDF‑Formularfelder

Eingabefelder erstellen (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");
}

Wichtige Punkte

• Unterstützt dynamische Benutzereingaben.
• Felddaten können für weitere Verarbeitung verwendet werden.

4. Benutzerdefinierte Layouts

Kopf‑ & Fußzeile (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. Mobile & Responsive Unterstützung

PDF aus HTML generieren (html2pdf)

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

Zusammenfassung

Wichtige fortgeschrittene Techniken:

• Dynamische Daten: PDFs aus JSON erstellen.
• Zusammenführen/Bearbeiten: Verwenden Sie pdf-lib für fortgeschrittene Bearbeitung.
• Formularfelder: Interaktive Dokumente erstellen.
• Benutzerdefiniertes Design: Verwenden Sie pdfmake für layoutreiche Dokumente.

6. Häufig gestellte Fragen (FAQ)

Einführung

Dieser Abschnitt beantwortet häufige Fragen, die Entwickler beim Erzeugen oder Bearbeiten von PDFs in JavaScript haben.

1. Grundlegende Vorgänge

Q1. Welche Bibliothek ist am besten für die PDF‑Erstellung in JavaScript?

A: Wählen Sie basierend auf Ihren Bedürfnissen:

• Einfache PDF‑Erstellung: jsPDF
• Bearbeiten & Zusammenführen: pdf-lib
• Komplexe Layouts: pdfmake
• HTML‑zu‑PDF: html2pdf

Q2. Wie stelle ich japanischen Text korrekt dar?

A: Befolgen Sie diese Schritte:

1. Bereiten Sie eine japanische Schriftart vor (Noto Sans JP, IPA usw.).
2. Konvertieren Sie die Schriftart in Base64.
3. Betten Sie sie mit addFileToVFS() und addFont() ein.
4. Wählen Sie sie mit setFont() aus.

Q3. Warum wird japanischer Text auf mobilen Geräten fehlerhaft angezeigt?

A: Mobile Geräte haben keine japanischen Schriftarten.
Lösung: Betten Sie immer japanische Schriftarten ein.

Q4. Wie füge ich ein Signaturfeld hinzu?

A: Sie können ein Signaturbild mit pdf-lib einfügen:

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

2. Fortgeschrittene Nutzung

Q5. Kann ich dynamische QR‑Codes in PDFs einfügen?

A: Ja, mit jsPDF.

Q6. Kann ich HTML‑Formulare zu PDF exportieren?

A: Ja, mit html2pdf.

Zusammenfassung

Dieses FAQ sollte Ihnen helfen, Ihren JavaScript‑PDF‑Workflow zu troubleshooten und zu optimieren.

7. Fazit

Einführung

Dieser Artikel bietet eine ausführliche Erklärung, wie man PDFs mit JavaScript erzeugt und bearbeitet, und deckt grundlegende Operationen, fortgeschrittene Techniken, Bibliotheksvergleiche und die Handhabung japanischer Schriftarten ab.

1. Komfort und Flexibilität von JavaScript‑basierten PDF‑Operationen

JavaScript läuft auf der Client‑Seite und ermöglicht die Echtzeit‑Generierung und -Bearbeitung von PDFs. Dadurch wird die Serverlast reduziert und interaktive Funktionen werden unterstützt.

Vorteile:

• Reduzierte Serverabhängigkeit
• Echtzeit‑Interaktion und Vorschau
• Hohe Kompatibilität mit modernen Browsern

2. Zusammenfassung der Bibliotheksauswahl

3. Zusammenfassung der Implementierungsbeispiele

• Grundlegende PDF‑Erstellung
• Dynamische Datenberichte
• Bearbeitung vorhandener PDFs
• Handhabung japanischer Schriftarten
• Benutzerdefiniertes Design & Layout‑Steuerung

4. Ausblick

Das JavaScript‑PDF‑Ökosystem wird sich weiterentwickeln:

1. Verbesserte Cloud‑Integration
2. KI‑unterstützte Dokumentenerstellung
3. Neue Bibliotheken für Geschwindigkeit und Skalierbarkeit

Fazit

JavaScript wird zunehmend unverzichtbar für die PDF‑Verarbeitung in Web‑Apps und Geschäftssystemen. Durch die Nutzung der in diesem Artikel besprochenen Bibliotheken und Techniken können Sie flexible und hochwertige PDF‑Lösungen mühelos implementieren.