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:

var pdf = new jsPDF();
pdf.text(30, 30, 'Hello world!');
pdf.save('hello_world.pdf');

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.

var pdf = new jsPDF();
pdf.text(30, 30, 'Hello world!');
pdf.save('hello_world.pdf');

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.

var pdf = new jsPDF('p', 'mm', 'a4');

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:

// 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);

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

pdf.textAlign(flyer_title, {align: "center"}, 0, _y);

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

Zum Beispiel müssen Sie Folgendes eingeben:

pdf.text(text string, X, Y);

"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):

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');

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!