So speichern Sie die HTML -Seite als PDF mit JavaScript
Während des Erstellens von Websites müssen Webdesigner die Benutzer als PDF die Möglichkeit geben, ein Formular oder eine Seite zu speichern. Beispielsweise verwenden Websites, die College- und Universitätsmissionen anbieten.
Dieser Beitrag beschreibt die Methode zum Speichern der HTML -Seite als PDF.
So speichern Sie die HTML -Seite als PDF mit JavaScript?
Verwenden Sie die JavaScript -Bibliotheken, um eine HTML -Seite als PDF zu speichernJSPDF" mit "html2canvas”. JSPDF ist eine JavaScript-basierte Open-Source-Bibliothek zum Erstellen von PDF-Dokumenten. Es bietet verschiedene Möglichkeiten zum Erstellen von PDF -Dateien mit spezifischen Merkmalen. Es enthält eine Vielzahl von Plugins, um verschiedene Methoden der PDF -Erstellung zu unterstützen, während HTML2CANVAS eine JavaScript -Bibliothek ist, die eine Ansicht aus den Daten auf der Seite generiert.
Beispiel
In einer HTML -Datei erstellen wir zunächst eine Webseite mit der folgenden Tabelle:
| Ausweis | Name | Bezeichnung | Beitrittsdatum | Alter |
|---|---|---|---|---|
| 1 | John | HR | 16may2000 | 26 |
| 2 | Rorda | Manager | 23june2005 | 24 |
| 3 | Stephen | Buchhalter | 20September 2008 | 26 |
Erstellen Sie jetzt eine “DruckenSchaltfläche, die die “anrufe“drucken()Methode im Klickereignis, um die HTML -Seite in eine PDF -Datei zu konvertieren:
Fügen Sie zum Konvertieren der HTML -Seite in PDF die "hinzu"JSPDF" Und "html2canvasBibliotheken zum Tag in der HTML -Datei. Für die "JSPDFBibliothek, verwenden Sie den folgenden Code:
Für die "html2canvasBibliothek, verwenden Sie den folgenden Link:
Fügen Sie in der JavaScript -Datei oder im Tag den folgenden Code hinzu:
Fenster.JSPDF = Fenster.JSPDF.JSPDF;var docpdf = new jspdf ();
Funktion print ()
var elementhtml = Dokument.querySelector ("#printTable");
docpdf.html (elementhtml,
Rückruf: Funktion (docpdf)
docpdf.Speichern ('HTML LinuxHint -Webseite.pdf ');
,
x: 15,
Y: 15,
Breite: 170,
Fensterbreite: 650
);
Im obigen Code:
- Zunächst muss JavaScript die JSPDF -Klasse laden und das JSPDF -Objekt verwenden.
- Dann definieren Sie eine "drucken()Funktion, die die Schaltfläche Klick auslöst.
- Verwendung der "QuerySelector ()Methode, wir erhalten den HTML -Inhalt von einem angegebenen Element per ID.
- Erstellen Sie eine PDF -Datei, indem Sie den HTML -Inhalt des ausgewählten Bereichs der Website konvertieren.
- Laden Sie dann den HTML -Inhalt als PDF -Datei herunter und speichern Sie sie.
Die Ausgabe zeigt an, dass die HTML -Webseite erfolgreich in eine PDF -Datei konvertiert wird:
Es geht darum, die HTML -Webseite als PDF in JavaScript zu speichern.
Abschluss
Verwenden Sie das JavaScript, um die HTML -Webseite als PDF zu speichernJSPDF"Bibliothek mit dem"html2canvas" Bibliothek. JSPDF ist eine Open-Source-Bibliothek, die zum Konvertieren der HTML-Seite in PDF verwendet wird, während HTML2CANVAS zum Erstellen einer Ansicht verwendet wird, die auf den Daten der Seite basiert. In diesem Beitrag wurde die Methode zum Speichern der HTML -Seite als PDF beschrieben.