Generieren von PDFs von Webseiten im laufenden Flug mit JSPDF

JSPDF: Ein leistungsstarkes Tool für die PDF -Generierung von Clients, Feinsteuerung der Seitenelemente

Kernpunkte:

• JSPDF ist eine JavaScript -Bibliothek, mit der die Erzeugung von PDF -Dateien direkt auf der Client -Seite erzeugt wird, wodurch die Verarbeitung beschleunigt wird. Es ist besonders geeignet, um die Position, Größe und Paging von Elementen in einem Dokument genau zu kontrollieren.
Die
• JSPDF -Bibliothek ist für die grundlegende PDF -Dateigenerierung einfach zu verwenden, kann jedoch aufgrund begrenzter Dokumentation für komplexe Projekte schwieriger sein. Es bietet jedoch die Möglichkeit, PDFs Text, Bilder und Formen hinzuzufügen und eine präzise Kontrolle über Position und Größe zu bieten.
• JSPDF -Bibliothek kann mit ihrer API erweitert werden. Funktionen wie textAlign() können hinzugefügt werden, und Texteigenschaften können mithilfe setFontSize(), setFont(), setTextColor() und setFontType() geändert werden.
• JSPDF ermöglicht außerdem das Erstellen von mehrseitigen PDFs, das Hinzufügen von Tabellen mit dem "autotablen" Plugin und einschließlich Hyperlinks. Aufgrund von Browser -Sicherheitsbeschränkungen können Benutzer jedoch keinen bestimmten Speicherort für die generierte PDF angeben.

tragbares Dokumentformat (PDF) ist eine wichtige Innovation in den Bereichen Desktop -Publishing und Büroautomatisierung.

Es wird auch häufig beim Web -Veröffentlichung verwendet, aber leider wird es häufig falsch verwendet - zum Beispiel, um Inhalte zu ersetzen, die mit HTML hätte erstellt werden sollen. Dies führt zu vielen Fragen zu Benutzerfreundlichkeit, Zugänglichkeit, SEO und mehr.

sind jedoch in einigen Fällen PDF -Dateien erforderlich: Wenn archivierte Dokumente erforderlich sind und außerhalb des Netzwerks (z. B. Rechnungen) verwendet werden oder wenn eine tiefe Kontrolle des Drucks erforderlich ist. Es ist die Notwendigkeit einer Drucksteuerung, die mich dazu veranlasst, einen Weg zu untersuchen, um einfach PDFs zu generieren.

Der Zweck dieses Artikels besteht nicht nur darin, einfach zu erklären, wie ein PDF erstellt wird (es gibt viele einfache Möglichkeiten, dies zu tun), sondern auch darauf zu konzentrieren, wo PDF Werkzeuge.

Druckverarbeitung

Jeder, der sich mit CSS-Druckregeln befasst hat, versteht, wie schwierig es ist, eine anständige Cross-Browser-Kompatibilität zu erreichen (z. B. lesen Sie die Tischunterbrechungstabelle in Can I verwenden). Wenn ich also etwas bauen muss, das ich drucken muss, versuche ich immer, CSS zu vermeiden. Die einfachste Lösung besteht darin, PDF zu verwenden. Was ich hier spreche, ist keine einfache HTML -zu -PDF -Konvertierung. (Ich habe mehrere solcher Tools ausprobiert, aber keiner von ihnen befriedigt mich völlig.) Mein Ziel ist es, die Position und Größe von Elementen, Seitenpausen usw. volle Kontrolle zu haben.

In der Vergangenheit habe ich FPDF verwendet, ein PHP -Tool, das Ihnen einfach diese Art von Steuerung gibt und sie problemlos mit vielen Plugins erweitern kann.

Leider scheint die Bibliothek aufgegeben worden zu sein (die letzte Version stammt aus dem Jahr 2011) (Update: Tatsächlich scheint die neueste Version im Dezember 2015 veröffentlicht zu werden), aber dank einiger JavaScript -Bibliotheken sind wir jetzt PDF Dateien können direkt auf der Client -Seite erstellt werden (so dass sie schneller generiert werden).

Vor ein paar Monaten, als ich mein Projekt startete, suchte ich nach einer JS -Bibliothek und fand schließlich zwei Kandidaten: JSPDF und PDFMake. PDFMake scheint gut dokumentiert und einfach zu bedienen, aber da es sich um eine Beta handelt, habe ich mich für JSPDF entschieden.

PDF bauen Sie JSPDF

JSPDF -Dokumentation ist ziemlich kurz, einschließlich einer Seite zusammen mit einigen Demos sowie weiteren Informationen in der Quelldatei (oder ihrer JSDOC -Seite). Denken Sie also daran, dass die Verwendung für komplexe Projekte am Anfang etwas schwierig sein kann.

Wie auch immer, JSPDF ist sehr einfach, wenn grundlegende PDF -Dateien generiert werden können. Schauen wir uns ein einfaches Beispiel "Hallo Welt" an:

<code class="language-javascript">var pdf = new jsPDF();
pdf.text(30, 30, 'Hello world!');
pdf.save('hello_world.pdf');</code>

Diese HTML -Seite generiert eine einzelne PDF -Datei mit einer Seite und speichert sie auf Ihrem Computer. Zunächst müssen Sie mit der JSPDF -Bibliothek (in diesem Fall von CDNJs.com) verlinken, dann eine JSPDF -Instanz erstellen, eine Textzeile hinzufügen und das Ergebnis als hello_world.pdf speichern.

Beachten Sie, dass ich Version 1.0.272 verwendet habe und es nicht die neueste ist: Zum Zeitpunkt des Schreibens ist die neueste Version 1.1.135, aber es hat viele Probleme, also verwende ich immer noch die vorherige Version.

Sie können sehen, wie einfach es ist, eine grundlegende PDF -Datei zu erstellen (weitere Beispiele finden Sie auf der JSPDF -Website).

Versuchen wir, komplexere Inhalte aufzubauen.

Flyer -Element

Ich wurde gebeten, vor einigen Monaten eine Anwendung für die Erstellung einiger einfacher Flyer zu erstellen. Es ist Teil eines größeren Projekts, das sich mit Reisebürodiensten befasst. Der reale Flyer -Bereich ist mit einigen JSON -Daten besiedelt.

Der Hauptzweck des Flyer besteht darin, eine einfache Möglichkeit zu bieten, die Sonderangebote anzuzeigen, die im Reisebüro -Store -Fenster angezeigt werden sollen.

Ich habe die App für diesen Artikel verschoben, alle serverseitigen Funktionen, vereinfachtes Flyer-Design entfernt, die Kompatibilität der Legacy-Browser beseitigt und eine sehr einfache Benutzeroberfläche mit Bootstrap 3 und JQuery erstellt.

Diese Demo funktioniert gut mit Firefox und Chrome, während Explorer (oder Edge) nicht erlaubt, Voransichten anzuzeigen, sondern nur die generierte PDF herunterladen kann.

Dies ist ein Beispiel für PDF, das mit der App (Fotoquelle: Rafael Leão/Unsplash)

erstellt wurde.

Eine laufbare Demo finden Sie am Ende dieses Artikels oder direkt in CodePen. Beachten Sie, dass die PDF -Vorschau, die in IFRames geladen wird, die Ergebnisseite in IFrame lädt, da CODEPEN einige Probleme in Chrome und Safari aufweist, sodass die Vorschau angezeigt wird. (Wenn Sie können, verwenden Sie Firefox oder probieren Sie die Demo auf meiner persönlichen Website).

Flyer Builder

Mit der Benutzeroberfläche kann der Benutzer einige grundlegende Daten einfügen (Titel, Zusammenfassung und Preis). Sie können ein Bild hinzufügen, andernfalls wird der Titel "Sonderangebot" des grauen Box angezeigt.

Andere Daten (Agentenname und URL und Logo der Website) sind in den Anwendungscode eingebettet.

PDF kann in IFrame (außer Explorer oder Edge) oder direkt heruntergeladen werden.

Wenn Sie auf die Schaltfläche "Vorschau aktualisieren" oder "herunterladen" klicken, wird der PDF mit JSPDF generiert und als Daten -URI -Zeichenfolge an das IFRame übergeben oder in der Festplatte gespeichert, wie im obigen Beispiel gezeigt.

PDF -Generierung Verwenden Sie zunächst die folgenden Optionen, um eine neue JSPDF -Objektinstanz zu erstellen: Porträtorientierung (P), Millimeter -Einheiten (MM), "A4" -Format.

<code class="language-javascript">var pdf = new jsPDF();
pdf.text(30, 30, 'Hello world!');
pdf.save('hello_world.pdf');</code>

Verwenden Sie die Addimage -Funktion, um Bilder hinzuzufügen. Beachten Sie, dass jedes in einer PDF -Seite platzierte Objekt genau positioniert sein muss. Sie müssen deklarierte Einheiten verwenden, um jede Objektkoordinate zu verarbeiten.

<code class="language-javascript">var pdf = new jsPDF('p', 'mm', 'a4');</code>

Bild muss Basis64-Codierung sein: Das Proxy-Logo ist in diesem Format in das Skript eingebettet, während das vom Benutzer beladene Bild unter Verwendung der meetAsDataurl-Methode in der $ ('#flyer-Image') codiert wird.

Titel wird mit der Textalign -Funktion hinzugefügt. Beachten Sie, dass diese Funktion nicht Teil des JSPDF -Kerns ist, aber wie der Autor in seinem Beispiel vorschlägt, kann die Bibliothek mit seiner API leicht erweitert werden. Sie finden die Funktion textalign () oben im Flyer Builder -Skript:

<code class="language-javascript">// pdf.addImage(base64_source, image format, X, Y, width, height)
pdf.addImage(agency_logo.src, 'PNG', logo_sizes.centered_x, _y, logo_sizes.w, logo_sizes.h);</code>

Diese Funktion berechnet die X -Koordinate der Textzeichenfolge, um sie zu zentrieren, und ruft dann die native text () -Methode auf:

<code class="language-javascript">pdf.textAlign(flyer_title, {align: "center"}, 0, _y);</code>

Um Texteigenschaften zu ändern, können Sie die Methoden setFontSize(), setFont(), setTextColor() und setFontType() verwenden.

Zum Beispiel müssen Sie Folgendes eingeben:

<code class="language-javascript">pdf.text(text string, X, Y);</code>

"Sonderangebot" Graukarton und Preiskreis Verwenden Sie zwei ähnliche Methoden: roundedRect() und circle(). Beide erfordern die oberen linken Eckkoordinaten, den Größenwert (Breite und Höhe im ersten Fall und Radius im zweiten Fall):

<code class="language-javascript">pdf.setFontSize(20);
pdf.setFont("times");
pdf.setFontType("bold");
pdf.setTextColor(255, 0, 0);
pdf.text(10,10, 'This is a 20pt Times Bold red string');</code>

Stilparameter bezieht sich auf die Füll- und Schlaganfalleigenschaften eines Objekts. Zu den gültigen Stilen gehören: s [Standard] für Schlaganfall, F für Polsterung, DF (oder FD) für Polsterung und Schlaganfall.

Die Eigenschaften

Füll- und Schlaganfall müssen mit setFillColor und setDrawColor voreingestellt werden, für die der RGB -Wert und die setLineWidth erforderlich sind, für die der Linienwert in den zu Beginn der PDF -Dokumenterstellung deklarierten Einheiten erforderlich ist.

Der vollständige Code ist in der Codepen -Demonstration zu finden:

(Der Codepen -Link sollte hier eingefügt werden, da ich nicht auf externe Websites zugreifen kann, kann er nicht bereitgestellt werden)

Schlussfolgerung

Dieses grundlegende Beispiel zeigt, wie ein sehr einfacher Flyer mit JSPDF erstellt wird.

Es kann einfach zu bedienen sein, aber der Mangel an vollständigen Dokumentation macht jeden Schritt sehr kompliziert.

Ich suche immer noch nach anderen Lösungen und konzentriere mich auf andere Lösungen wie PDFMake. Aber am Ende denke ich, dass die einzige wirklich klare Lösung darin besteht, Browser besser zu unterstützen, die CSS -Regeln drucken!

(Der FAQ -Teil sollte hier enthalten sein, der Inhalt entspricht dem Originaltext, aber das Format kann nach Bedarf eingestellt werden)

Das obige ist der detaillierte Inhalt vonGenerieren von PDFs von Webseiten im laufenden Flug mit JSPDF. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!