PDF-WERKZEUGE

PDF-Datei in JavaScript drucken

Regan Pun

23. Mai 2023

Teilen Sie:

1.0 Einführung

Das Portable Document Format (PDF) wurde von Adobe entwickelt, um Dokumente mit Text und Grafiken zu teilen. 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. PDF in ein iframe-Tag einbetten
2. Zugriff auf die Druckoption, die mit dem PDF-Viewer des iframe geliefert wird
3. Drucken Sie die PDF der aktuellen Seite mit JavaScript
4. Rufen Sie die Methode printJS auf und übergeben Sie die Element-ID an die druckbare Eigenschaft
5. Verwenden Sie eine alternative Bibliothek, um in .NET C# zu drucken, indem Sie die Print-Methode verwenden

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. Im obigen Beispiel gibt es ein iframe mit einer Quelle (das PDF). Außerdem gibt es ein Eingabeelement vom Typ Schaltfläche.

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

So drucken Sie eine PDF-Datei in JavaScript: 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.

So drucken Sie eine PDF-Datei in JavaScript: Abbildung 2 - Diese Zeichenfolgen drucken

2.3 IronPDF - Die Node.js PDF-Bibliothek

IronPDF ist eine umfassende Node.js PDF-Bibliothek, die in Bezug auf Genauigkeit, Benutzerfreundlichkeit und Geschwindigkeit überzeugt. 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 ist ein Beispiel für das Erstellen und Speichern eines PDF-Dokuments aus einer HTML-Datei, einem HTML-String und einer URL, um das Format 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

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

Wie man eine PDF-Datei 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.

Dank des unkomplizierten Integrationsprozesses von IronPDF für in JavaScript erstellte Frameworks und Bibliotheken, der hervorragenden IronPDF-Dokumentation für Node.js und der Beispielcodebeispiele sowie des reaktionsschnellen technischen Supports können Entwickler schnell loslegen. Dies macht es zu einer erstklassigen Wahl für die Erzeugung und den Druck von professionellen PDFs in Node.js-bezogenen Anwendungen.

IronPDF bietet eine kostenlose Testversion für Node.js an, sodass Sie die gesamte Funktionalität testen können, bevor Sie eine fundierte Entscheidung treffen. Es ist auch für andere Sprachen wie C# .NET, Java und Python verfügbar. Besuchen Sie die IronPDF-Website für weitere Details. Laden Sie IronPDF für Node.js von der IronPDF Node.js-Downloadseite herunter.

Regan Pun

Jetzt mit dem Ingenieurteam chatten

Software-Ingenieur

Regan schloss sein Studium an der University of Reading mit einem BA in Elektrotechnik ab. Bevor er zu Iron Software kam, konzentrierte er sich in seinen früheren Jobs auf einzelne Aufgaben. Was ihm bei Iron Software am meisten Spaß macht, ist das Spektrum der Aufgaben, die er übernehmen kann, sei es im Vertrieb, im technischen Support, in der Produktentwicklung oder im Marketing. Es macht ihm Spaß, die Art und Weise zu verstehen, wie Entwickler die Bibliothek von Iron Software nutzen, und dieses Wissen zu nutzen, um die Dokumentation und die Produkte kontinuierlich zu verbessern.

< PREVIOUS
Wie man mit JavaScript eine PDF-Datei erzeugt

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