suchen

Heim >Web-Frontend >js-Tutorial >Wie erstelle ich mithilfe von JavaScript eine PDF-Datei aus HTML innerhalb eines Div?

Wie erstelle ich mithilfe von JavaScript eine PDF-Datei aus HTML innerhalb eines Div?

Linda Hamilton
Linda HamiltonOriginal
2024-12-08 10:51:13654Durchsuche

How to Generate a PDF from HTML within a Div using JavaScript?

PDF aus HTML in div mit Javascript generieren

Die Aufgabe, die erledigt werden muss, besteht darin, den Inhalt eines div mit der ID zu konvertieren „pdf“ in ein PDF-Dokument umwandeln. Dieses PDF-Dokument muss automatisch mit dem Dateinamen „foobar.pdf“ heruntergeladen werden.

Während jspdf häufig für die PDF-Generierung verwendet wird, stellt die Einschränkung der Textfunktion eine Herausforderung dar. Es akzeptiert nur Zeichenfolgenwerte, wohingegen eine HTML-Eingabe erforderlich ist. Um dieses Problem zu beheben, sind Plugins wie jspdf.plugin.from_html.js und jspdf.plugin.split_text_to_size.js erforderlich. So verwenden Sie diese Plugins, um das gewünschte Ergebnis zu erzielen:

  • Beginnen Sie mit der Einbindung der erforderlichen Skripte in Ihr Projekt:
jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js
  • Wenn bestimmte Elemente erforderlich sind Um aus dem PDF ausgeschlossen zu werden, muss ihnen eine ID zugewiesen und innerhalb eines speziellen Elementhandlers von jsPDF identifiziert werden. Um beispielsweise das Element mit der ID „ignorePDF“ auszuschließen, ändern Sie den HTML-Code wie folgt:
<!DOCTYPE html>
<html>
  <body>
    <p>
  • Der folgende JavaScript-Code generiert das PDF und zeigt es in einem Popup an Fenster:
var doc = new jsPDF();          
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 180,'elementHandlers': elementHandler
    });

doc.output("dataurlnewwindow");

Diese Methode erstellt ein PDF mit dem Text „Drucken Sie dies als PDF.“

Das ist entscheidend Beachten Sie, dass spezielle Elementhandler in der aktuellen Version hauptsächlich IDs verarbeiten. Folglich führt die Verwendung von Klassenselektoren (z. B. „.ignorePDF“) nicht zum gewünschten Ergebnis.

Darüber hinaus fehlt jsPDF die Unterstützung für CSS-Stile und es wird nur Text innerhalb von Textknoten gedruckt. Daher werden Werte aus Textbereichen und ähnlichen Elementen nicht in das PDF aufgenommen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mithilfe von JavaScript eine PDF-Datei aus HTML innerhalb eines Div?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html print String if for while using class JS function this display input issue
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie kann ich JavaScript-Objekte mit dynamischen Schlüsseln aus Variablen erstellen?Nächster Artikel：Wie kann ich JavaScript-Objekte mit dynamischen Schlüsseln aus Variablen erstellen?

In Verbindung stehende Artikel

Mehr sehen