Der Benutzer füllt das Formular aus und klickt zum Speichern und kann das PDF -Dokument direkt herunterladen.
Lösung ServergenerierungIdeen
Google Chrome entwickelte 2017 eine eigene kopomlose Funktion und startete gleichzeitig Puppenspieler. Es kann als Browser verstanden werden, der keine Schnittstelle hat, aber die Funktionsfunktionen der Server ausfüllen kann.
So können wir den Puppeteer -Browser auf dem Server starten, die Ziel -URL öffnen und die vom Chrome -Browser bereitgestellte Konvertierungsfunktion verwenden, um HTML in PDF zu konvertieren.
Kerncodegenerierung auf dem ServerZuerst müssen Sie Puppenspieler installieren. Die NPM -Installation kann Fehler geben. Es ist am besten, CNPM Taobao Image zu verwenden, um es zu installieren.
Geben Sie cnpm i puppeteer -S -Installationsabhängigkeiten ein.
Um eine JS -Datei zu erstellen, müssen Sie die URL nur mit dem Puppeteer -Browser öffnen und die PDF speichern.
// html2pdf.jsconst puppeteer = required ('puppeteer'); (async function () {// starten Sie den Service const browser = warte puppeteer.launch (); // Die Registerkarte konstete. page.goto ('https://koa.bootcss.com/#context'); Geben Sie dann node html2pdf.js in die Konsole ein, um den Dienst zu starten.
Natürlich kann Modul.export die Modulmethode auch gemäß der Geschäftslogik exportieren.
Mangel
Dynamische Daten im Formular nicht speichern
Da es sich um eine Anforderungsseite vom Server handelt, ist der ausgeschnittene PDF der Ausgangszustand, in dem die Seite nicht ausgefüllt wurde, wenn die Benutzereingabe nicht in der Anforderungsadresse gespeichert ist.
Mit anderen Worten, es kann nur statische Seiten konvertieren, da unsere Bedürfnisse eine Menge Benutzereingaben haben, also übergeben.
Der Client generiert KerncodeIdeen
Mangel
Verzerrung.
Wir können deutlich feststellen, dass die Auflösung und Konfiguration der Seite wahrscheinlich die Qualität des Ausgabebildes beeinflusst, da es dem Einfügen des Screenshot in eine PDF auf einer Seite ähnlich ist.
Gleichzeitig können der Seitenlink und andere Funktionen verloren gehen, da es sich um einen Screenshot handelt.
Textausschnitt
Wenn die Leinwand in der Leinwand größer als eine Seitengröße von PDF ist, ist die Ausgabe fehlerhaft. Zu diesem Zeitpunkt müssen wir feststellen, ob die Leinwand der Leinwand die A4 -Größe überschreitet. Wenn es die Leinwand überschreitet, segmentieren Sie die Leinwand und fügen Sie sie in eine andere Seite ein.
Das Problem kommt zu diesem Zeitpunkt wieder. Da es das Bild aufteilt, ist es wahrscheinlich, dass das Bild oder der Text von der Hälfte abgeschnitten wird, da wir die Struktur des internen Leinwandelements nicht analysieren können.
Kerncode
Unsere Bedürfnisse haben keine Bilder und Links, daher hat das Verzerrungsproblem wenig Einfluss auf uns. Gleichzeitig besteht unsere Form aus mehreren gleichen Elementen mit doppelter Länge, und diese Elemente sind sehr kurz und überschreiten ein Stück A4 -Papier nicht (obwohl dies bei Bedarf nicht streng ist, können Sie die Breite und Höhe des DOM -Elements erhalten und gemäß der Höhe des DOM -Elements schneiden).
Daher habe ich vor, die Leinwand direkt entsprechend dem Element zu teilen und jedes Element auf eine Seite von A4 Papier zu speichern.
Vor dem Start müssen mehrere Kernansätze verstanden werden:
html2canvas
// DOM ist der DOM -Knoten, der konvertiert werden soll.
JSPDF
// eine Instanz erstellen let pdf = new JSPDF ('', 'pt', 'a4'); // Add the image to the pdf file// The first parameter is the file (base64) format to be inserted, the second is the file format// The third and fourth are the coordinates in the upper left corner of the picture, and the last two are the width and height of the picture after inserting the picture pdf.addImage(image,'JPEG',10,10,height,width); // Fügen Sie eine neue Seite hinzu pdf.addpage () // Speichern Sie die PDF -Datei pdf.save ()Leinwand
// Canvas ist das Bild, das geschnitten werden muss // SX, SY sind die Koordinaten zum Anschneiden // Swidth und Shight sind die Breite und Höhe des Zuschneidens // dx und dy sind die Koordinaten, die nach dem Abschneiden in das Bild eingefügt sind. Swidth, Shight);
/*** @Description: Formular zur PDF -Datei* @Return: PDF*/ONSUBMIT () {// Dies ist das Formular, das ich konvertieren möchte. // die Breite und Höhe des Elements abrufen. Sei Breite = Form. let height = form.getBoundingClientRect (). Höhe; html2canvas (Form, {HintergrundColor: #ffffff, Breite: Breite, Höhe: Höhe, Skala: 2, erlaubig: true,}). Dann ((Canvas) => {let pdf = new jspdf ('', 'pt', 'a4'); // bildschnitze let let let let let let let let let let let let let let let let letlight = this. Überqueren Sie die Leinwandliste und fügen Sie ein Bild pro Seite Canvaslist hinzu. pdf.addimage (itemimage, 'jpeg', 10,10,575.28,575.28/item.width*item.Height); pdf.save ('test.pdf'); Sei ChunkHeight = Höhe/num; // Die Höhe jeder Scheibe lassen ChunkList = []; // Speichern Sie die Ergebnis -Leinwand für (sei i = 0; i <Höhe; i+= ChunkHeight) {// Initialisieren Sie die Position des Crop -Rechteck -Boxs SX = 0, sy = i, swidth = widthth, Shight = Chunkhight, Dx = 0, Dy = 0; // Erstellen Sie einen Canvas -Knoten let canvaStem = document.createelement (canvas); // Initialisieren Sie die Leinwandgröße leinhaut. Height = ChunkHeight; canvaStem.width = width; cxt = canvaStem.getContext (2d); // das kurze Bild in den neuen Leinwandknoten cxt.drawimage (Leinwand, SX, Sy, Swidth, Sheight, DX, Dy, Swidth, Sheight) geben; ChunkList.push (canvaStem); } return ChunkList;}, EndwirkungDie Seite nach dem Formular wurde gespeichert
Der Effekt der Umwandlung in PDF
Dies ist der Artikel über die reine Client- und Reine Server -Implementierungslösung von HTML zu PDF. Weitere verwandte HTML -zu -PDF -Inhalte finden Sie in früheren Artikeln von Wulin.com oder stöbern Sie weiter nach unten zu verwandten Artikeln. Ich hoffe, jeder wird Wulin.com in Zukunft unterstützen!