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 anzeigt

Veröffentlicht 13. Juni 2023

Teilen Sie:

Einführung

Adobe entwickelte das Portable Document Format (PDF) um die gemeinsame Nutzung von Dokumenten mit viel Text und Grafiken zu ermöglichen. Um eine PDF-Datei online zu öffnen, ist ein anderes Programm erforderlich. PDF-Dateien sind in der heutigen Zeit für umfangreiche Veröffentlichungen unverzichtbar. In der Wirtschaft werden sie häufig zur Erstellung von Dokumenten und Rechnungen verwendet. Entwickler generieren PDF-Dateien, um Kundenwünsche zu erfüllen. Moderne Bibliotheken haben die Erstellung von PDF-Dateien so einfach wie nie zuvor gemacht. 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 der Erstellungs-, Lese- und Konvertierungsfunktionen.

2.0 JavaScript-Bibliotheken

Nehmen wir zum Beispiel das Szenario an, dass wir möchten, dass der Kunde eine Kopie unserer Rechnung herunterladen und ansehen kann. Darüber hinaus sind das genaue Layout, der Druck und die Anzahl der Seiten dieser Rechnung für uns ebenso wichtig. In diesem Abschnitt werden wir einige der beliebtesten Bibliotheken für die Anzeige von PDF-Dokumenten untersuchen.

2.1 HTML2PDF

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

Gehen Sie folgendermaßen vor, um eine PDF-Datei von Ihrer Website aus zu erstellen:

Installieren Sie die html2pdf-JavaScript-Bibliothek mit NPM lokal auf Ihrem Server oder fügen Sie sie in Ihren HTML-Code ein, wie im folgenden Beispiel gezeigt.
Erstellen Sie eine Funktion namens generatePDF, mit der der gewünschte Webseitenabschnitt in ein PDF-Dokument umgewandelt wird. 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 Variablen opt hinzufügen. Damit können Sie verschiedene Einstellungen für die PDF-Produktion anpassen.
Fügen Sie eine Schaltfläche in Ihre HTML-Seite ein, die beim Anklicken die Funktion "ViewPDF" auslöst. Diese Funktion generiert die PDF-Datei und öffnet sie in einer separaten Browser-Registerkarte.

<!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() {
   const element = 'Hello World!';
   var opt = {
      margin:       1,
      filename:     'Demopdf.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 2 },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    //html2pdf().set(opt).from(element).save();

    let worker = html2pdf().set(opt).from(element).toPdf().output('blob').then((data) => {
    //console.log(data)
    let fileURL = URL.createObjectURL(data);
    window.open(fileURL);
    })

   }
  </script>
  </head>
  <body>
    <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() {
   const element = 'Hello World!';
   var opt = {
      margin:       1,
      filename:     'Demopdf.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 2 },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    //html2pdf().set(opt).from(element).save();

    let worker = html2pdf().set(opt).from(element).toPdf().output('blob').then((data) => {
    //console.log(data)
    let fileURL = URL.createObjectURL(data);
    window.open(fileURL);
    })

   }
  </script>
  </head>
  <body>
    <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 jsPDF erstellt PDF-Dateien ausschließlich mit JavaScript. Es erzeugt ein Seitenobjekt als PDF-Seite und formatiert es auf der Grundlage der mitgelieferten Formatierung. Die am häufigsten verwendete und gut gepflegte PDF-Bibliothek auf GitHub heißt ebenfalls jsPDF. Es 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.

Die APIs von PDFKit folgen einem imperativen Modell, was die Erstellung komplizierter Layouts erschweren kann. Der einzige zusätzliche Schritt, der für die Schrifteinbettung mit JavaScript erforderlich ist, besteht darin, die Schriften in TTF-Dateien zu konvertieren, was ein einfacher Vorgang ist. Im folgenden Codebeispiel erstellen wir eine PDF-Datei und öffnen die erstellte PDF-Datei in einer separaten Registerkarte in einem Webbrowser. Das Ergebnis wird ähnlich aussehen wie die oben gezeigten Bilder.

<!DOCTYPE html>
 <html>
     <head>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
         <script>
             function viewPDF() {
                 var pdf = new jsPDF({
                     orientation: 'p',
                     unit: 'mm',
                     format: 'a5',
                     putOnlyUsedFonts:true
                     });
                 pdf.text("Hello World", 20, 20);
                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() {
                 var pdf = new jsPDF({
                     orientation: 'p',
                     unit: 'mm',
                     format: 'a5',
                     putOnlyUsedFonts:true
                     });
                 pdf.text("Hello World", 20, 20);
                window.open(pdf.output('bloburl'))
             }
         </script>
     </head>
     <body>
         <button onclick="viewPDF()">View Pdf</button>
     </body>
 </html>

HTML

2.3 IronPDF

IronPDF für Node.js vereinfacht das programmgesteuerte Erstellen und Anpassen von PDF-Dokumenten. IronPDF for Node.js ist eine robuste Lösung für die PDF-Erzeugung in Node.js-Umgebungen und wurde von Iron Software entwickelt, einem zuverlässigen Anbieter von Hochleistungsbibliotheken für die Dokumentenverarbeitung. Sie lässt sich nahtlos in Node.js-Projekte integrieren und bietet Entwicklern leistungsstarke Werkzeuge zum einfachen Generieren, Formatieren und Bearbeiten von PDFs.

Die IronPDF-Bibliothek verfügt über eine breite Palette von Funktionen, einschließlich der Möglichkeit, Seiten in neuen oder bestehenden PDF-Dokumenten aufzuteilen und zu kombinieren, bestehende PDF-Dateien zu lesen und zu bearbeiten, Bilder aus PDF-Dateien zu extrahieren, Text, Grafiken, Lesezeichen, Wasserzeichen, Kopf- und Fußzeilen zu PDF-Dateien hinzuzufügen - und das alles, ohne den Acrobat Reader zu benötigen. Aus CSS- und CSS-Mediendateien können PDF-Dokumente erstellt werden. Mit IronPDF können Benutzer sowohl neue als auch bereits vorhandene PDF-Formulare erstellen, hochladen und aktualisieren.

Hauptmerkmale von IronPDF for Node.js:

Vielseitige PDF-Erzeugung: Mit IronPDF können Entwickler PDFs aus verschiedenen Quellen wie HTML, CSS, JavaScript, Bildern und anderen Dateitypen erzeugen. Diese Flexibilität ermöglicht die Erstellung dynamischer und visuell ansprechender PDF-Dokumente, die auf spezifische Anforderungen zugeschnitten sind.
Erweiterte Dokumentanpassung: IronPDF bietet Entwicklern die Möglichkeit, PDF-Dokumente mit Funktionen wie Kopf- und Fußzeilen, Anhängen, digitalen Signaturen, Wasserzeichen und Lesezeichen zu versehen. Dies ermöglicht die Erstellung professioneller PDF-Dateien mit umfangreichen Inhalten und interaktiven Elementen.
Sicherheitsfunktionen: IronPDF bietet robuste Sicherheitsfunktionen, um PDFs vor unbefugtem Zugriff zu schützen. Entwickler können Sicherheitsmaßnahmen wie Kennwörter, digitale Signaturen, Metadaten und andere Sicherheitseinstellungen implementieren, um sensible Informationen in PDF-Dokumenten zu schützen.
Optimierte Leistung: IronPDF ist auf optimale Leistung ausgelegt und bietet vollständige Multithreading- und asynchrone Unterstützung. Dies gewährleistet eine effiziente PDF-Erzeugung und eignet sich daher für unternehmenskritische Anwendungen, bei denen die Leistung im Vordergrund steht.
Umfassender Funktionsumfang: 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 einfachen Dokumentenerstellung bis hin zu fortgeschrittener Anpassung und Sicherheit bietet IronPDF eine breite Palette von Funktionen, die den Anforderungen von Entwicklern gerecht werden.

Im folgenden Codebeispiel wird das PDF-Dokument mit JavaScript erstellt und dann direkt in der Anwendung angezeigt:

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

(async () => {
   // 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 advancedPdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
})();

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

(async () => {
   // 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 advancedPdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
})();

JAVASCRIPT

In diesem Code:

Wir generieren das PDF-Dokument (advancedPdf) aus dem HTML-Inhalt mit Assets.
Wir speichern das PDF-Dokument in einer temporären Datei (html-mit-assets.pdf) mit saveAs.
Wir verwenden die Funktion open aus dem Paket open, um die PDF-Datei mit der Standard-Systemanwendung zu öffnen. Dadurch wird die PDF-Datei in der Regel in dem auf dem System installierten Standard-PDF-Viewer geöffnet, andernfalls im Standardbrowser.

Weitere Code-Beispiele für PDF-bezogene Aufgaben finden Sie hier code-Beispiele seite.

Die Ausgabe wird wie in der obigen Abbildung dargestellt. Weitere Informationen über IronPDF finden Sie unter hier.

3.0 Schlussfolgerung

Abschließend sei darauf hingewiesen, dass der auf der ersten Seite angezeigte JavaScript-Code missbraucht werden kann und bei Verwendung durch andere Personen ein Sicherheitsrisiko darstellen kann. Bei der Einbindung eines solchen Codes in eine Webseite oder Website müssen die Risiken eines unbefugten Zugriffs und die Schwachstellen der Datensicherheit unbedingt berücksichtigt werden. Außerdem sollten Kompatibilitätsprobleme mit veralteten Browsern und verschiedenen Betriebssystemen und Browsern berücksichtigt werden.

Im Gegensatz dazu bietet die IronPDF for Node.js-Bibliothek erweiterte Sicherheitsmaßnahmen zum Schutz vor potenziellen Bedrohungen. Sie ist nicht von bestimmten Browsern abhängig und mit allen gängigen Browsern kompatibel. Mit nur wenigen Codezeilen können Entwickler mit IronPDF problemlos PDF-Dateien erstellen und lesen.

Die Bibliothek bietet verschiedene Lizenzierungsoptionen, um den unterschiedlichen Bedürfnissen der Entwickler gerecht zu werden, darunter eine kostenloser Test lizenz für Entwickler und zusätzliche lizenzen zum Kauf angeboten. Das Lite-Paket zum Preis von $749 beinhaltet eine permanente Lizenz, ein Jahr Produkt-Support und Upgrade-Optionen ohne wiederkehrende Gebühren. Diese Lizenzen können in Entwicklungs-, Staging- und Produktionsumgebungen verwendet werden. Zusätzlich ist es auch für andere Sprachen verfügbar wie C# .NET, Java und Python. Besuchen Sie die IronPDF website für weitere Einzelheiten.

< PREVIOUS
Wie man PDF-Dateien in JavaScript erstellt

NÄCHSTES >
Wie man mit JavaScript eine PDF-Datei erzeugt