Wie erstelle ich mithilfe von JavaScript eine PDF-Datei aus HTML innerhalb eines Div?-js-Tutorial-php.cn

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

Linda Hamilton

Freigeben： 2024-12-08 10:51:13

Original

653 Leute haben es durchsucht

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!