import {PdfDocument} from "@ironsoftware/ironpdf"; (async () => { // Create a PDF from an HTML string const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>"); // Export the PDF to a file await pdf.saveAs("output.pdf"); // Advanced Example with HTML Assets // Load external HTML assets: Images, CSS, and JavaScript. const htmlContentWithAssets = "<img src='icons/iron.png'>"; const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets); // Save the PDF with loaded assets await advancedPdf.saveAs("html-with-assets.pdf"); })();

PDF-WERKZEUGE

Wie man PDF-Dateien in JavaScript betrachtet

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Darrius Serrant

Aktualisiert:28. Juli 2025

Adobe entwickelte das Portable Document Format (PDF), um den Austausch von Dokumenten mit umfangreichem Text und Grafiken zu ermöglichen. Um eine PDF-Datei online zu öffnen, ist ein anderes Programm erforderlich. PDF-Dateien sind in der heutigen Umgebung für umfassende Veröffentlichungen unverzichtbar. Sie werden häufig im Geschäftsleben genutzt, um Dokumente und Rechnungen zu erstellen. Entwickler erstellen PDF-Dateien, um Kundenanforderungen gerecht zu werden. Moderne Bibliotheken haben es einfacher denn je gemacht, PDFs zu erstellen. Bei der Auswahl der geeigneten Bibliothek für ein Projekt, das seine eigenen gerenderten PDF-Dateien erzeugt, müssen verschiedene Aspekte berücksichtigt werden, einschließlich Bau-, Lese- und Konvertierungsmöglichkeiten.

2.0 JavaScript-Bibliotheken

Betrachten Sie zum Beispiel das Szenario, in dem wir möchten, dass der Kunde eine Kopie unserer Rechnung herunterladen und ansehen kann. Weitere für uns gleichermaßen wichtige Dinge sind das genaue Layout, der Druck und die Seitenanzahl dieser Rechnung. In diesem Abschnitt untersuchen wir einige der beliebtesten Bibliotheken zum Anzeigen von PDF-Dokumenten.

2.1 HTML2PDF

HTML2PDF kombiniert die Funktionen von jsPDF und Html2Canvas in einem einzigen Modul, um Webseiten und Vorlagen in vollständige PDF-Dokumentdateien umzuwandeln.

Folgen Sie diesen Schritten, um ein PDF von Ihrer Website zu erstellen:

Installieren Sie die html2pdf JavaScript-Bibliothek lokal auf Ihrem Server, indem Sie NPM verwenden, oder fügen Sie sie Ihrem HTML-Code hinzu, wie im folgenden Beispiel gezeigt.
Erstellen Sie eine Funktion namens viewPDF, die dazu verwendet wird, den Zielabschnitt der Webseite in ein PDF umzuwandeln. Verwenden Sie die Funktion getElementById, um das gewünschte Segment auszuwählen.
Bevor Sie es an html2pdf übergeben, ändern Sie die Formatierungsoptionen, indem Sie sie der Variable opt hinzufügen. Dies ermöglicht es Ihnen, verschiedene Einstellungen für die PDF-Produktion anzupassen.
Fügen Sie auf Ihrer HTML-Seite eine Schaltfläche ein, die beim Anklicken die Funktion viewPDF auslöst. Diese Funktion erzeugt das PDF und öffnet es in einem separaten Browser-Tab.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  <script>
    function viewPDF() {
      // Select the element to convert to PDF
      const element = document.getElementById('content-to-print');

      // Define PDF formatting options
      var opt = {
        margin: 1,
        filename: 'Demopdf.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      };

      // Create and open the PDF
      let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
        .then((data) => {
          let fileURL = URL.createObjectURL(data);
          window.open(fileURL);
        });
    }
  </script>
</head>
<body>
    <div id="content-to-print">

        <h1>Hello World!</h1>
    </div>
    <button onclick="viewPDF()">View PDF</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  <script>
    function viewPDF() {
      // Select the element to convert to PDF
      const element = document.getElementById('content-to-print');

      // Define PDF formatting options
      var opt = {
        margin: 1,
        filename: 'Demopdf.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      };

      // Create and open the PDF
      let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
        .then((data) => {
          let fileURL = URL.createObjectURL(data);
          window.open(fileURL);
        });
    }
  </script>
</head>
<body>
    <div id="content-to-print">

        <h1>Hello World!</h1>
    </div>
    <button onclick="viewPDF()">View PDF</button>
</body>
</html>

HTML

So zeigen Sie PDF-Dateien in JavaScript an: Abbildung 1

2.3 jsPDF

Die Open-Source-Software namens jsPDF erstellt PDF-Dateien ausschließlich mit JavaScript. Es erzeugt ein Seitenobjekt als PDF-Seite und formatiert es basierend auf der bereitgestellten Formatierung. Die am häufigsten verwendete und gut gepflegte PDF-Bibliothek auf GitHub heißt ebenfalls jsPDF. Sie bietet einfach zu verwendende Module sowohl für Node.js als auch für Webbrowser, da sie in Übereinstimmung mit dem AMD-Modulstandard exportiert werden.

Bei PDFKit folgen seine APIs einem imperativen Modell, was den Aufbau komplexer Layouts erschweren kann. Der einzige zusätzliche Schritt, der für die Einbettung von Schriften mit JavaScript erforderlich ist, besteht darin, die Schriften in TTF-Dateien umzuwandeln, was ein einfaches Verfahren ist. Im folgenden Codebeispiel erstellen wir eine PDF-Datei und öffnen dann das erstellte PDF in einem separaten Tab in einem Webbrowser.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
  <script>
    function viewPDF() {
      // Create a new instance of jsPDF
      var pdf = new jsPDF({
        orientation: 'p',
        unit: 'mm',
        format: 'a5',
        putOnlyUsedFonts: true
      });

      // Add text to the PDF
      pdf.text("Hello World", 20, 20);

      // Open the generated PDF in a new browser tab
      window.open(pdf.output('bloburl'));
    }
  </script>
</head>
<body>
  <button onclick="viewPDF()">View Pdf</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
  <script>
    function viewPDF() {
      // Create a new instance of jsPDF
      var pdf = new jsPDF({
        orientation: 'p',
        unit: 'mm',
        format: 'a5',
        putOnlyUsedFonts: true
      });

      // Add text to the PDF
      pdf.text("Hello World", 20, 20);

      // Open the generated PDF in a new browser tab
      window.open(pdf.output('bloburl'));
    }
  </script>
</head>
<body>
  <button onclick="viewPDF()">View Pdf</button>
</body>
</html>

HTML

Die Ausgabe wird wie im obigen Bild erzeugt und angezeigt.

IronPDF für Node.js vereinfacht den Prozess der programmatischen Erstellung und Anpassung von PDF-Dokumenten. Entwickelt von Iron Software, einem vertrauenswürdigen Anbieter von leistungsstarken Dokumentenverarbeitungsbibliotheken, bietet IronPDF eine robuste Lösung zur PDF-Erstellung in Node.js-Umgebungen. Es integriert sich nahtlos in Node.js-Projekte und bietet Entwicklern leistungsstarke Werkzeuge zur einfachen Erstellung, Formatierung und Bearbeitung von PDFs.

Hauptmerkmale von IronPDF for Node.js:

Vielseitige PDF-Generierung: Mit IronPDF können Entwickler PDFs aus verschiedenen Quellen einschließlich HTML, CSS, JavaScript, Bildern und anderen Dateitypen erzeugen. Diese Flexibilität ermöglicht die Erstellung dynamischer und ansprechender PDF-Dokumente, die auf spezifische Anforderungen zugeschnitten sind.
Erweiterte Dokumentenanpassung: IronPDF ermöglicht es Entwicklern, PDF-Dokumente mit Funktionen wie Kopf- und Fußzeilen, Anhängen, digitalen Signaturen, Wasserzeichen und Lesezeichen zu verbessern. Dies ermöglicht die Erstellung von PDFs in professioneller Qualität mit reichhaltigem Inhalt und interaktiven Elementen.
Sicherheitsmerkmale: IronPDF bietet robuste Sicherheitsmerkmale, um PDFs vor unbefugtem Zugriff zu schützen. Entwickler können Sicherheitsmaßnahmen wie Passwörter, digitale Signaturen, Metadaten und andere Sicherheitseinstellungen implementieren, um sensible Informationen in PDF-Dokumenten zu schützen.
Optimierte Leistung: IronPDF ist für eine optimale Leistung ausgelegt und bietet vollständige Unterstützung für Multithreading und asynchrone Verarbeitung. Dies gewährleistet eine effiziente PDF-Erstellung und macht es geeignet für geschäftskritische Anwendungen, bei denen die Leistung entscheidend ist.
Umfassendes Funktionsset: Mit über 50 Funktionen zum Erstellen, Formatieren und Bearbeiten von PDF-Dokumenten bietet IronPDF eine umfassende Lösung für alle PDF-bezogenen Aufgaben. Von der grundlegenden Dokumentenerstellung bis hin zur erweiterten Anpassung und Sicherheit bietet IronPDF eine breite Palette von Funktionen, um die Anforderungen von Entwicklern zu erfüllen.

Das folgende Codebeispiel erstellt das PDF-Dokument mit JavaScript und wird dann direkt aus der Anwendung heraus angezeigt:

import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";

(async () => {
  try {
    // Create a PDF from an HTML string
    const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");

    // Save the PDF to a temporary file
    const filePath = "html-with-assets.pdf";
    await pdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
  } catch (error) {
    console.error("Error creating or opening PDF:", error);
  }
})();

import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";

(async () => {
  try {
    // Create a PDF from an HTML string
    const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");

    // Save the PDF to a temporary file
    const filePath = "html-with-assets.pdf";
    await pdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
  } catch (error) {
    console.error("Error creating or opening PDF:", error);
  }
})();

JAVASCRIPT

In diesem Code:

Wir generieren das PDF-Dokument (pdf) aus dem HTML-Inhalt.
Wir speichern das PDF-Dokument in einer temporären Datei (html-with-assets.pdf) mit Hilfe von saveAs.
Wir verwenden die Funktion open aus dem Paket open, um die PDF-Datei mit der Standard-Systemanwendung zu öffnen. Dies öffnet typischerweise die PDF im Standard-PDF-Betrachter, der auf dem System installiert ist, oder in einem Standardbrowser.

Für weitere Codebeispiele zu PDF-bezogenen Aufgaben besuchen Sie bitte diese IronPDF Node.js Code-Beispiele-Seite.

So zeigen Sie PDF-Dateien in JavaScript an: Abbildung 2

Die Ausgabe wird wie im obigen Bild erzeugt und angezeigt. Um mehr über IronPDF zu erfahren, sehen Sie sich bitte den IronPDF für .NET PDF Viewer Guide an.

3.0 Fazit

Abschließend ist es wichtig zu beachten, dass der JavaScript-Code, der auf der ersten Seite oben angezeigt wird, das Potenzial hat, missbraucht zu werden, und bei Verwendung durch andere Sicherheitsrisiken darstellen kann. Bei der Integration eines solchen Codes in eine Webseite oder Website ist es entscheidend, die Risiken einer unbefugten Zugriff und Sicherheitslücken in der Datenverarbeitung zu berücksichtigen. Zusätzlich sollten Kompatibilitätsprobleme mit veralteten Browsern und verschiedenen Betriebssystemen und Browsern berücksichtigt werden.

Im Gegensatz dazu bietet die IronPDF Node.js-Bibliothek erweiterte Sicherheitsmaßnahmen, um gegen potenzielle Bedrohungen zu schützen. Sie ist nicht von bestimmten Browsern abhängig und mit allen gängigen Browsern kompatibel. Mit nur wenigen Zeilen Code können Entwickler PDF-Dateien einfach erstellen und lesen, indem sie IronPDF verwenden.

Die Bibliothek bietet verschiedene Lizenzoptionen, um den Bedürfnissen verschiedener Entwickler gerecht zu werden, einschließlich einer kostenlosen Testversion für Entwickler und zusätzlichen kaufbaren Lizenzen. Das Lite Paket zum Preis von $999 beinhaltet eine permanente Lizenz, ein Jahr Produktsupport und Upgrade-Optionen ohne wiederkehrende Gebühren. Diese Lizenzen können in Entwicklungs-, Staging- und Produktionsumgebungen eingesetzt werden. Darüber hinaus ist IronPDF auch für andere Sprachen wie C# .NET, Java und Python verfügbar. Besuchen Sie die IronPDF-Website für weitere Details.

Darrius Serrant

Jetzt mit dem Ingenieurteam chatten

Full-Stack-Software-Ingenieur (WebOps)

Darrius Serrant hat einen Bachelor-Abschluss in Informatik von der University of Miami und arbeitet als Full-Stack-WebOps-Marketing-Ingenieur bei Iron Software. Seit seiner Jugend vom Programmieren angezogen, sah er die Informatik als sowohl mysteriös als auch zugänglich, was es zum perfekten Medium für Kreativität und Problemlösung ...