Ich möchte eine Funktion machen, um PDF im Web zu exportieren. Ich stellte fest, dass JSPDF von vielen Menschen empfohlen wird. Leider unterstützt es Chinesen nicht. Schließlich fand ich PDFMake, was dieses Problem gut löste. Sein Effekt kann zuerst unter http://pdfmake.org/playground.html angesehen werden. Während der Verwendung wurde auch festgestellt, dass das Einfügen von Bildern eine relativ umständliche Sache war.
Als Reaktion auf diese Probleme kann der Hauptinhalt dieses Artikels in drei Teile unterteilt werden:
• Grundnutzungsmethode von PDFMake;
• wie man chinesische Probleme lösen;
• So fügen Sie Bilder ein, indem Sie die Bildadresse angeben.
Grundnutzungsmethode von PDFMake
1. Enthält die folgenden zwei Dateien
<script src = "bauen/pdfMake.min.js"> </script> <script src = "build/vfs_fonts.js"> </script>
2. Deklarieren Sie ein Dokumentdefinitionsobjekt im JS-Code, bei dem es sich um die eigene Begriff von PDFMAKE handelt. Um es einfach auszudrücken, soll ein Objekt erstellt werden, das zumindest das Inhaltsattribut enthält. Anschließend können Sie die PDFMake -Methode aufrufen, um den PDF zu exportieren, siehe den folgenden Code:
<script type = "text/javaScript"> // Dokumentdefinitionsobjekt var dd = {content: ['ein Absatz', 'ein weiterer Absatz, diesmal etwas länger, um sicherzustellen, dass diese Zeile in mindestens zwei Zeilen unterteilt wird.']}; // PDF PDFMake.Createpdf (DD). Download () exportieren; </script>Befolgen Sie das obige Beispiel und Sie sehen, dass die Eingabeaufforderung zum Herunterladen angezeigt wird. Für ein vollständiges Tutorial über PDFMake melden Sie sich bitte beim PDFMake -Projekt an, um es anzuzeigen.
PDFMake unterstützt Chinese
Drei Schritte:
1. Gehen Sie zur Website der PDFMake -Projekt, laden Sie alle Projekte herunter, geben Sie dann das Projektverzeichnis ein und geben Sie die Schriftdatei (z. B. Microsoft Yahei.ttf) in das Beispiel für Beispiele/Schriftarten ein und verwenden Sie dann GrunT Dump_dir, um eine neue VFS_FONTS.JS -Datei zu generieren.
Aus der obigen Beschreibung können wir sehen, dass das Projekt über Grunzen verwaltet wird. Wenn es kein relevantes Wissen gibt, gehen Sie bitte online und nehmen Sie zuerst eine Nachhilfe.
Der Befehl grund Dump_dir verpackt alle Dateien im Verzeichnis der Schriftarten. Bitte geben Sie also keine nutzlosen Dateien hinein.
Microsoft Yahei.ttf sucht online und das Verzeichnis, in dem Schriftarten unter der Windows -Computersystemdiskette gespeichert werden, finden Sie ebenfalls.
2. Kehren Sie zu Ihrem eigenen Beispielcode zurück, ändern Sie das Objekt von PDFMake im JS -Code und erklären Sie, dass die Schriftart, die Sie verwenden möchten:
pdfMake.fonts = {Roboto: {Normal: 'Roboto-Regular.ttf', BOLD: 'Roboto-medium.ttf', Italics: 'Roboto-iTitalic.ttf', Boldtalics: 'Roboto-iTtf', Boldtalic: 'Roboto:' Roboto: 'Roboto:' Roboto: 'Roboto:' Roboto: · ititalic.ttf ', Microsoft yah. 'Microsoft yahei.ttf', BOLD: 'Microsoft yahei.ttf', Italics: 'Microsoft yahei.ttf',}};3.. Deklarieren Sie die Schriftart, die standardmäßig im Dokumentdefinitionsobjekt verwendet wird. Speziell: Es ist ein Objekt zu deklarieren. Zusätzlich zum Inhaltsattribut benötigt es auch ein Standardstil -Attribut. Unter dem Standardstyle gibt es ein weiteres Schriftartattribut:
var dd = {content: ['chinesischer und englischer Test', 'ein weiterer Absatz, diesmal etwas länger, um sicherzustellen, dass diese Zeile in mindestens zwei Zeilen unterteilt wird.Das Folgende ist ein vollständiger Beispielquellcode basierend auf den obigen Schritten:
<! DocType html> <html Lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> Mein erster Exportieren von PDF </title> <script src = "build/pdfmake.min.js"> </script> <script> <script> <Script> <Scripts ~ src = "busing/vfs_fonts" = {Inhalt: ['Chinesischer und englischer Test', 'Ein weiterer Absatz, diesmal ein bisschen länger, um sicherzustellen, dass diese Zeile in mindestens zwei Zeilen unterteilt wird. pdfMake.fonts = {Roboto: {normal: 'Roboto-regular.ttf', kühn: 'Roboto-medium.ttf', italics: 'Roboto-iTitalic.ttf', Boldalics: 'roboto-italic.ttf', Boldalics: 'Roboto-ititalic.ttf',}; pdfMake.createpdf (dd) .download (); } </script> </head> <body> <button onclick = "Down ()"> Download </button> </body> </html>Bild einfügen
Im Hinblick auf das Einfügen von Bildern verlangt JSPDF, dass das Bild zuerst in Daten -URL konvertiert werden kann, und PDFMake ermöglicht es, direkte Pfade anzugeben, was sehr bequem erscheint, aber dies ist bedingt, und es muss als Server verwendet werden, oder das Bild in VFS_FONTS.JS -Js, so dass es im Allgemeinen, nicht sehr nützlich ist, so dass Sie noch das Bild mit dem Datei -URL -Formular konvertieren.
Um dieses Problem zu lösen, habe ich ein Funktionsobjekt von Imagedataurl geschrieben, das gleichzeitig mehrere Bildadressen übergeben kann. Nachdem alle Bilder geladen wurden, wird Imagedataurl.oncomplete ausgelöst. Die Daten -URL jedes Bildes wird im Rückruf übernommen. Das PDF kann gemäß den Anforderungen von PDFMake korrekt erzeugt werden.
Das Prinzip von Imagedataurl besteht darin, das Bild auf das Leinwand -Tag von H5 zu zeichnen und dann die Daten -URL des Bildes über den Todataurl der Leinwand zu erhalten. Bitte achten Sie auf Probleme mit dem Browser -Kompatibilität bei der Verwendung.
Das Folgende ist ein Beispiel für das Schreiben von SampleImage.jpg, sampleage.jpg, sampleImage.jpg nach PDF nacheinander. SampleAge.jpg existiert während des Tests nicht und der PDF wird direkt ignoriert.
<! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> Mein zweiter Exportport PDF </title> <script src = "build/pdfmake.min.js"> </script> <script> <Script> <Script> <Scripts ~ src = "busing/vfs_fonts_fonts" New Imagedataurl (["sampleImage.jpg", "sampleImage.jpg"]); X.onComplete = function () {var imgs = new Array (); console.log ("komplett"); für (Schlüssel in this.imgdata) {if (this.imgdata [key] == this.eMptyObj) // Ignorieren Sie die nicht existierenden Bilder; Imgs.push ({Bild: this.imgdata [key]}); // pdfMake's Bildformat {Bild: Bilddatenurl}} var dd = {content: ['title', imgs,],}; pdfMake.createpdf (dd) .download (); }} </script> </head> <body> <button onclick = "Down ()"> Download </button> <script> Funktion Imagedataur (URLs) {// URLs muss eine Zeichenfolge oder ein String -Array this.comPlETENUM = 0 sein; this.totalnum = 0; this.imgdata = new Array (); this.eMptyObj = new Object (); this.onComplete = function () {}; this.getDataurl = function (url, index) {var c = document.createelement ("canvas"); var cxt = C.GetContext ("2D"); var img = new Image (); var dataurl; var p; p = dies; img.src = url; img.onload = function () {var i; var maxwidth = 500; var scale = 1,0; if (img.width> maxwidth) {scale = maxwidth / img.width; C. Width = Maxwidth; C.Height = Math.Floor (img.Height * scale); } else {c.width = img.width; C.Height = img.Height; } cxt.drawimage (IMG, 0, 0, C. Width, C.Height); p.imgdata [index] = c.todataurl ('Bild/jpeg'); für (i = 0; i <p.totalnum; ++ i) {if (p.imgdata [i] == null) break; } if (i == p.totalnum) {p.onComplete (); }}; img.onError = function () {p.imgdata [index] = p.EmptyObj; für (i = 0; i <p.totalnum; ++ i) {if (p.imgdata [i] == null) break; } if (i == p.totalnum) {p.onComplete (); }}; } if (URLS -Instanz von Array) {this.totalnum = urls.length; this.imgdata = new Array (ttotalnum); für (Schlüssel in URLs) {this.getDataurl (URLs [Schlüssel], Schlüssel); }} else {this.imgdata = new Array (1); this.totalnum = 1; this.getDataurl (URLS, 0); }} </script> </body> </html>Die obige Methode zum Exportieren von PDF-Plug-Ins nach JS (Unterstützung chinesischer und Bildnutzungswege) ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.