PDF-WERKZEUGE

Wie man PDF-Dateien in JavaScript druckt

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

Darrius Serrant

Aktualisiert:Juli 28, 2025

1.0 Einführung

Das Portable Document Format (PDF) wurde von Adobe entwickelt, um Dokumente mit Text und Grafiken zu teilen. Ein zusätzliches Programm ist erforderlich, um ein PDF-Dokument online zu öffnen. PDF-Dateien sind heutzutage in der Gesellschaft von großer Bedeutung für kritische Informationen. Viele Unternehmen erstellen Dokumente und Rechnungen mithilfe von PDF-Dateien. Um den Bedürfnissen der Kunden gerecht zu werden, erstellen Entwickler PDF-Dokumente. Dank moderner Bibliotheken war es noch nie einfacher, PDFs zu erstellen.

Um die ideale Bibliothek für ein Projekt auszuwählen, das diese Art von Bibliothek verwendet, müssen wir eine Reihe von Faktoren abwägen, einschließlich Erstellungs-, Lese- und Konvertierungsfähigkeiten.
In diesem Tutorial werden wir eine Vielzahl von JavaScript-Bibliotheken zur PDF-Erstellung durchgehen. Wir werden die JS-Bibliothek und reale Anwendungsszenarien untersuchen und uns dabei auf drei Hauptpunkte konzentrieren:

Die laufende Konfiguration
Die Module, die das Tippen und benutzerdefinierte Schriftarten erleichtern
Benutzerfreundlichkeit

Nach dem Lesen dieses Artikels werden Sie in der Lage sein, die ideale PDF-Bibliothek für Ihre JavaScript-Anwendung auszuwählen. Abschließend werden wir auch IronPDF, eine nützliche und effektive PDF-Bibliothek, behandeln.

class="hsg-featured-snippet">

Wie man in JavaScript eine PDF-Datei druckt

Binden Sie das PDF in ein ifame-Tag ein
Greifen Sie auf die Druckoption zu, die der PDF-Viewer des iframes bietet
Drucken Sie das PDF der aktuellen Seite mit JavaScript
Rufen Sie die printJS-Methode auf und übergeben Sie die Element-ID an die druckbare Eigenschaft
Verwenden Sie eine alternative Bibliothek, um mit .NET C# zu drucken, indem Sie die Print-Methode nutzen

2.0 Bibliotheken

Betrachten Sie das Szenario, in dem wir möchten, dass der Kunde eine Kopie unserer Rechnung herunterladen und drucken kann. Wir benötigen diese Rechnung, um genau und in geeigneter Weise gedruckt zu werden. Hier werden wir einige der vielen Bibliotheken genauer betrachten, die zum Konvertieren dieser Rechnung vom HTML-Dateiformat in PDF verfügbar sind.

2.1 Einfacher JavaScript-Code

Normalerweise laden wir zum Drucken der Inhalte einer PDF-Datei diese auf unseren Computer herunter, öffnen sie und wählen die Druckoption. JavaScript hingegen macht es einfach, eine PDF-Datei direkt von einer Webseite aus zu drucken. Alles, was Sie brauchen, ist ein iframe auf Ihrer Website oder die Fähigkeit, eines dynamisch zu erstellen, das Dokument hinzuzufügen und es zu drucken. Ich werde Ihnen zeigen, wie man mit JavaScript eine PDF-Datei druckt. Eine Webseite innerhalb einer anderen Webseite wird mit einem iframe angezeigt. Damit die Webseite angezeigt wird, muss das iframe seine Quelle kennen.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Print PDF</title>
</head>
<body>
    <!-- Embedding the PDF in an iframe -->
    <iframe 
        src="Demo.pdf" id="myFrame" 
        frameborder="0" style="border:0;" 
        width="300" height="300">
    </iframe>
    <p>
        <!-- Button to trigger the print function -->
        <input type="button" id="bt" onclick="printPdf()" value="Print PDF" />
    </p>

    <script>
        // JavaScript function to print the PDF inside the iframe
        let printPdf = () => {
            // Access the iframe
            let objFra = document.getElementById('myFrame');
            // Focus the iframe's window
            objFra.contentWindow.focus();
            // Trigger the print dialog
            objFra.contentWindow.print();
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Print PDF</title>
</head>
<body>
    <!-- Embedding the PDF in an iframe -->
    <iframe 
        src="Demo.pdf" id="myFrame" 
        frameborder="0" style="border:0;" 
        width="300" height="300">
    </iframe>
    <p>
        <!-- Button to trigger the print function -->
        <input type="button" id="bt" onclick="printPdf()" value="Print PDF" />
    </p>

    <script>
        // JavaScript function to print the PDF inside the iframe
        let printPdf = () => {
            // Access the iframe
            let objFra = document.getElementById('myFrame');
            // Focus the iframe's window
            objFra.contentWindow.focus();
            // Trigger the print dialog
            objFra.contentWindow.print();
        }
    </script>
</body>
</html>

HTML

Um ein PDF zu drucken, können die Inhalte eines Dokuments mithilfe eines iframes angezeigt werden, und dann können die Inhalte mit JavaScript gedruckt werden. In beiden Situationen wird ein iframe benötigt. Im obigen Beispiel gibt es ein iframe mit einer Quelle (das PDF). Es gibt auch ein Eingabeelement des Typs Button.

Die onclick-Eigenschaft des Buttons ruft die printPdf-Methode auf.

Wie man in JavaScript eine PDF-Datei druckt: Abbildung 1 - Drucken

2.2 Print.js

Print.js wurde hauptsächlich entwickelt, um uns zu ermöglichen, PDF-Dateien innerhalb unserer Apps zu drucken, ohne dass wir weg navigieren, sie importieren und aus der Benutzeroberfläche drucken oder einbetten müssen. Dies ist für spezielle Umstände gedacht, in denen Benutzer nur die PDF-Dateien drucken möchten und sie nicht öffnen oder herunterladen müssen.

Wenn Benutzer beispielsweise Berichte drucken möchten, die serverseitig erstellt werden, kann dies nützlich sein. Diese Berichte werden Ihnen als PDF-Dokumente zurückgegeben. Diese Dateien können gedruckt werden, ohne geöffnet werden zu müssen. Innerhalb unserer Apps bietet Print.js eine bequeme Möglichkeit, diese Dateien zu drucken.

<!DOCTYPE html>
<html>
<head>
    <title>Print.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
    <link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">   
</head>
<body>
    <!-- Area to be printed -->
    <div id="print-area" class="print-main">
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>AAA</td>
                <td>25</td>
            </tr>
            <tr>
                <td>BBB</td>
                <td>24</td>
            </tr>
        </table>
    </div>
    <!-- Button to trigger Print.js -->
    <button id="btnPrint">Print</button>

    <script>
        $(document).ready(function(){
            // When the print button is clicked
            $("#btnPrint").on("click", function(){
                // Use Print.js to print the content of #print-area
                printJS({
                    printable: 'print-area',
                    type: 'html'
                });
            });
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Print.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
    <link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">   
</head>
<body>
    <!-- Area to be printed -->
    <div id="print-area" class="print-main">
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>AAA</td>
                <td>25</td>
            </tr>
            <tr>
                <td>BBB</td>
                <td>24</td>
            </tr>
        </table>
    </div>
    <!-- Button to trigger Print.js -->
    <button id="btnPrint">Print</button>

    <script>
        $(document).ready(function(){
            // When the print button is clicked
            $("#btnPrint").on("click", function(){
                // Use Print.js to print the content of #print-area
                printJS({
                    printable: 'print-area',
                    type: 'html'
                });
            });
        });
    </script>
</body>
</html>

HTML

Der obige Code kann verwendet werden, um PDF-Dateien direkt von der Website aus zu drucken. Er zeigt, dass das Drucken alle in dem HTML-Element mit der ID 'print-area' verfügbaren HTML-Strings drucken wird.

Wie man in JavaScript eine PDF-Datei druckt: Abbildung 2 - Diese Zeichenfolgen drucken

2.3 IronPDF - Die Node.js PDF-Bibliothek

IronPDF ist eine umfassende Node.js-PDF-Bibliothek, die in Genauigkeit, Benutzerfreundlichkeit und Geschwindigkeit herausragt. Es bietet eine Vielzahl von Funktionen zum Erstellen, Bearbeiten und Formatieren von PDFs direkt aus HTML, URLs und Bildern in React. Mit Unterstützung für verschiedene Plattformen, einschließlich Windows, MacOS, Linux, Docker und Cloud-Plattformen wie Azure und AWS, sorgt IronPDF für plattformübergreifende Kompatibilität. Sein benutzerfreundliches API ermöglicht es Entwicklern, die PDF-Erzeugung und -Manipulation schnell in ihre Node.js-Projekte zu integrieren.

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.

Here is an example of generating and saving a PDF document from HTML File, HTML String, and URL to preserve formatting for printing:

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

// An async function to demonstrate how to generate PDF documents
(async () => {
    // Create a PDF from a URL
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    // Save it to a file
    await pdfFromUrl.saveAs("website.pdf");

    // Create a PDF from a local HTML file
    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    // Save it to a file
    await pdfFromHtmlFile.saveAs("markup.pdf");

    // Create a PDF from an HTML string
    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    // Save it to a file
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();

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

// An async function to demonstrate how to generate PDF documents
(async () => {
    // Create a PDF from a URL
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    // Save it to a file
    await pdfFromUrl.saveAs("website.pdf");

    // Create a PDF from a local HTML file
    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    // Save it to a file
    await pdfFromHtmlFile.saveAs("markup.pdf");

    // Create a PDF from an HTML string
    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    // Save it to a file
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();

JAVASCRIPT

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

Wie man in JavaScript eine PDF-Datei druckt: Abbildung 3 - IronPDF

3.0 Fazit

Der Benutzer kann den obenstehenden JavaScript-Code sehen, er könnte jedoch von anderen missbraucht werden. Die Nutzung des Quellcodes in dieser Weise ist möglich. Zusätzlich ist es nicht schwierig, Code auf die Webseite hinzuzufügen, der die Sicherheit der darüber gesendeten Daten gefährdet. Die oben genannte JavaScript-Bibliothek wird von verschiedenen Browsern unterschiedlich betrachtet. Der Code muss daher auf einer Vielzahl von Systemen ausgeführt werden, bevor er veröffentlicht wird. Da einige neue Funktionen von älteren Browsern nicht unterstützt werden, müssen wir auch die Browser-Kompatibilität für diese Funktionen überprüfen. Die oben genannten Bibliotheken können PDF-Dateien erstellen. Der Benutzer muss auch einige grundlegende Kenntnisse über das Skript besitzen, mit dem er arbeitet.

Mit IronPDFs einfacher Integrationsprozess für in JavaScript eingebettete Frameworks und Bibliotheken, ausgezeichneter IronPDF-Dokumentation für Node.js und Musterbeispielen sowie reaktivem technischen Support können Entwickler blitzschnell loslegen, was es zu einer bevorzugten Wahl für das Erstellen und Drucken professioneller PDFs in Node.js-verknüpften Anwendungen macht.

IronPDF bietet eine kostenlose Testversion für Node.js, sodass Sie die vollständige Funktionalität testen können, bevor Sie eine fundierte Entscheidung treffen. It is also available for other languages like C# .NET, Java and Python. Besuchen Sie die IronPDF-Website für weitere Details. Laden Sie IronPDF für Node.js von der IronPDF-Node.js-Downloadseite herunter.

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 ...