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

PDF-Datei in JavaScript drucken

Veröffentlicht 23. Mai 2023

Teilen Sie:

1.0 Einführung

Das Portable Document Format (PDF) wurde von Adobe zum Zweck der gemeinsamen Nutzung von Dokumenten mit Text und Grafiken entwickelt. Um ein PDF-Dokument online zu öffnen, ist ein zusätzliches Programm erforderlich. PDF-Dateien sind in der heutigen Gesellschaft für wichtige Informationen sehr wichtig. Viele Unternehmen erstellen Dokumente und Rechnungen mit PDF-Dateien. Um den Anforderungen der Kunden gerecht zu werden, erstellen die Entwickler PDF-Dokumente. Dank der modernen Bibliotheken war es noch nie so einfach, 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, darunter Build-, Lese- und Konvertierungsfähigkeiten.

In diesem Tutorial werden wir eine Reihe von JavaScript-Bibliotheken für die Erstellung von PDF-Dokumenten kennenlernen. Wir werden die JS-Bibliothek und reale Anwendungsszenarien analysieren und uns dabei auf drei Hauptpunkte konzentrieren:

Die laufende Konfiguration
Die Module zur Erleichterung des Tippens und der benutzerdefinierten Schriftarten
Benutzerfreundlichkeit

Nach dieser Lektüre können Sie die ideale PDF-Bibliothek für Ihre JavaScript-Anwendung auswählen. Schließlich werden wir auch IronPDF vorstellen, eine nützliche und effektive PDF-Bibliothek.
Drucken einer PDF-Datei in JavaScript
1. Einbetten der PDF-Datei in einen iframe-Tag
2. Zugriff auf die Druckoption, die mit dem PDF-Viewer des iframe geliefert wird
3. Drucken der PDF-Datei der aktuellen Seite mit JavaScript
4. Rufen Sie die printJS methodee und übergeben Sie die Element-ID an die druckbare Eigenschaft
5. Verwenden Sie eine alternative Bibliothek zum Drucken in .NET C#, indem Sie die Drucken methode

2.0 Bibliotheken

Nehmen wir an, der Kunde soll eine Kopie unserer Rechnung herunterladen und ausdrucken können. Diese Rechnung muss genau und in geeigneter Weise gedruckt werden. Hier sehen wir uns einige der zahlreichen Bibliotheken an, die für die Konvertierung dieser Rechnung vom HTML-Dateiformat in das PDF-Format zur Verfügung stehen.

2.1 Einfacher JavaScript-Code

Um den Inhalt einer PDF-Datei zu drucken, laden wir sie normalerweise auf unseren Computer herunter, öffnen sie und wählen die Druckoption. Mit JavaScript hingegen ist es einfach, eine PDF-Datei direkt von einer Webseite aus zu drucken. Alles, was Sie brauchen, ist ein iframe auf Ihrer Website oder die Möglichkeit, einen iframe dynamisch zu erstellen, das Dokument hinzuzufügen und es zu drucken. Ich zeige Ihnen, wie Sie mit JavaScript eine PDF-Datei drucken können. Eine Webseite innerhalb einer anderen Webseite wird mit einem iframe angezeigt. Damit die Webseite angezeigt werden kann, muss der iframe seine Quelle kennen.

<html>
<head>
    <title>javascript print pdf</title>
</head>
<body>
    <iframe 
        src="Demo.pdf" id="myFrame" 
            frameborder="0" style="border:0;" 
                width="300" height="300">
    </iframe>
    <p>
        <input type="button" id="bt" onclick="print()" value="Print PDF" />
    </p>
</body>

<script>
    let print = () => {
        let objFra = document.getElementById('myFrame');
        objFra.contentWindow.focus();
        objFra.contentWindow.print();
    }
</script>
</html>

<html>
<head>
    <title>javascript print pdf</title>
</head>
<body>
    <iframe 
        src="Demo.pdf" id="myFrame" 
            frameborder="0" style="border:0;" 
                width="300" height="300">
    </iframe>
    <p>
        <input type="button" id="bt" onclick="print()" value="Print PDF" />
    </p>
</body>

<script>
    let print = () => {
        let objFra = document.getElementById('myFrame');
        objFra.contentWindow.focus();
        objFra.contentWindow.print();
    }
</script>
</html>

HTML

Was das Drucken von PDF-Dokumenten angeht, so kann der Inhalt eines Dokuments mit einem iframe angezeigt und dann mit JavaScript gedruckt werden. In beiden Fällen ist ein iframe erforderlich. In dem obigen Beispiel gibt es einen iframe mit einer Quelle (das PDF). Außerdem gibt es ein Eingabeelement vom Typ Schaltfläche.

Die Eigenschaft "onclick" der Schaltfläche ruft die Methode "print" auf.

Wie man PDF-Dateien in JavaScript druckt: Abbildung 1 - Drucken

2.2 Drucken.js

Print.js wurde in erster Linie entwickelt, um uns das Drucken von PDF-Dateien aus unseren Anwendungen heraus zu ermöglichen, ohne dass wir weg navigieren, sie über die Benutzeroberfläche importieren und drucken oder Einbettungen verwenden müssen. Dies ist für besondere Fälle gedacht, in denen die Benutzer die PDF-Dateien nur ausdrucken müssen und sie nicht öffnen oder herunterladen müssen.

Dies kann z. B. hilfreich sein, wenn Benutzer darum bitten, Berichte zu drucken, die auf der Serverseite erstellt wurden. Diese Berichte werden Ihnen als PDF-Dokumente zurückgeschickt. Diese Dateien können gedruckt werden, ohne dass sie geöffnet werden müssen. Innerhalb unserer Anwendungen bietet Print.js eine bequeme Möglichkeit, diese Dateien zu drucken.

<html>
    <head>
        <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>
        <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 id="btnPrint">Print</button>
        <script>
                $(document).ready(function(){
                    $("#btnPrint").on("click",function(){
                        printJS({
                            printable: 'print-area',
                            type: 'html'});
                    })
                })
        </script>
    </body>
</html>

<html>
    <head>
        <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>
        <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 id="btnPrint">Print</button>
        <script>
                $(document).ready(function(){
                    $("#btnPrint").on("click",function(){
                        printJS({
                            printable: 'print-area',
                            type: 'html'});
                    })
                })
        </script>
    </body>
</html>

HTML

Der obige Code kann verwendet werden, um PDF-Dateien direkt von der Website zu drucken. Er zeigt, dass beim Drucken alle HTML-Zeichenfolgen gedruckt werden, die innerhalb des HTML-Elements mit der ID "print-area" verfügbar sind.

Wie man PDF-Dateien in JavaScript druckt: Abbildung 2 - Drucken dieser Zeichenfolgen

2.3 IronPDF - Die Node.js PDF-Bibliothek

IronPDF ist eine umfassende Node.js PDF-Bibliothek, die sich durch Genauigkeit, Benutzerfreundlichkeit und Geschwindigkeit auszeichnet. Es bietet eine Vielzahl von Funktionen zur Erzeugung, Bearbeitung und Formatierung von PDFs direkt aus HTML, URLs und Bildern in React. Durch die Unterstützung verschiedener Plattformen wie Windows, MacOS, Linux, Docker und Cloud-Plattformen wie Azure und AWS gewährleistet IronPDF plattformübergreifende Kompatibilität. Die benutzerfreundliche API ermöglicht es Entwicklern, PDF-Erzeugung und -Bearbeitung schnell in ihre Node.js-Projekte zu integrieren.

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.

Hier ein Beispiel für die Erstellung und Speicherung eines PDF-Dokuments aus HTML-Datei, HTML-String, und URL um die Formatierung für den Druck beizubehalten:

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

(async () => {
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    await pdfFromUrl.saveAs("website.pdf");

    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    await pdfFromHtmlFile.saveAs("markup.pdf");

    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();

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

(async () => {
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    await pdfFromUrl.saveAs("website.pdf");

    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    await pdfFromHtmlFile.saveAs("markup.pdf");

    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();

JAVASCRIPT

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

Wie man PDF-Dateien in JavaScript druckt: Abbildung 3 - IronPDF

3.0 Schlussfolgerung

Der Benutzer kann den obigen JavaScript-Code sehen, aber er könnte von anderen missbraucht werden. Die Verwendung des Quellcodes ist auf diese Weise möglich. Außerdem ist es nicht schwer, der Website Code hinzuzufügen, der die Sicherheit der über die Website übermittelten Daten gefährdet. Die oben erwähnte JavaScript-Bibliothek wird von verschiedenen Browsern unterschiedlich dargestellt. Der Code muss daher auf einer Vielzahl von Systemen laufen, bevor er freigegeben wird. Da einige neue Funktionen von älteren Browsern nicht unterstützt werden, müssen wir auch die Browserkompatibilität für diese berücksichtigen. Die oben genannten Bibliotheken können PDF-Dateien erzeugen. Außerdem muss der Benutzer mit dem Skript, mit dem er arbeitet, vertraut sein.

Mit IronPDFs unkompliziertem Integrationsprozess für Frameworks und Bibliotheken, die in JavaScript erstellt wurden, lassen sich hervorragende dokumentation und Code-Beispielen sowie einem reaktionsschnellen technischen Support können Entwickler in kürzester Zeit loslegen, was die Software zur ersten Wahl für die Erstellung und den Druck professioneller PDFs in Node.js-Anwendungen macht.

IronPDF bietet eine kostenloser Testso können Sie die gesamte Funktionalität testen, bevor Sie eine fundierte Entscheidung treffen. Es ist auch für andere Sprachen verfügbar wie C# .NET, Java und Python. Besuchen Sie die IronPDF website für weitere Einzelheiten. IronPDF for Node.js herunterladen von hier.

< PREVIOUS
Wie man mit JavaScript eine PDF-Datei erzeugt

NÄCHSTES >
Wie man HTML in React in PDF konvertiert (Entwickler-Tutorial)