PDF-WERKZEUGE

Wie man PDF-Dateien in JavaScript betrachtet

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

Aktualisiert:Juli 28, 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 den Anforderungen der Kunden 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 verwendet wird, um den gewünschten Abschnitt der Webseite in ein PDF zu konvertieren. Verwenden Sie die Funktion getElementById, um den gewünschten Abschnitt auszuwählen.
Bevor Sie es an html2pdf übergeben, ändern Sie die Formatierungsoptionen, indem Sie sie der Variablen opt hinzufügen. Damit können Sie verschiedene Einstellungen für die PDF-Erstellung anpassen.
Fügen Sie Ihrer HTML-Seite einen Button hinzu, der bei einem Klick 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">
        <!-- Content to convert to PDF -->
        <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">
        <!-- Content to convert to PDF -->
        <h1>Hello World!</h1>
    </div>
    <button onclick="viewPDF()">View PDF</button>
</body>
</html>

HTML

Wie man PDF-Dateien in JavaScript anzeigt: 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

2.3 IronPDF

IronPDF for 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 für 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 zur Erstellung, Formatierung und Bearbeitung 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 saveAs.
Wir verwenden die open-Funktion aus dem open-Paket, um die PDF-Datei mit der Standardanwendung des Systems 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.

Wie man PDF-Dateien in JavaScript anzeigt: Abbildung 2

Die Ausgabe wird wie im obigen Bild erzeugt und angezeigt. Um mehr über IronPDF zu erfahren, sehen Sie sich bitte den IronPDF .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.

The library provides various licensing options to cater to different developer needs, including a free trial license for developers and additional licenses for purchase. Das Lite-Paket, das für $799 erhältlich ist, beinhaltet eine permanente Lizenz, ein Jahr Produktsupport und Upgrade-Optionen ohne wiederkehrende Kosten. Diese Lizenzen können in Entwicklungs-, Staging- und Produktionsumgebungen verwendet werden. Additionally, IronPDF is also available for other languages like C# .NET, Java, and Python. 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 ...