Wie kann ich mit JavaScript und jsPDF ein PDF aus einem HTML-Div generieren?-js-Tutorial-php.cn

Wie kann ich mit JavaScript und jsPDF ein PDF aus einem HTML-Div generieren?

Linda Hamilton

Freigeben： 2024-11-30 02:01:11

Original

357 Leute haben es durchsucht

How Can I Generate a PDF from an HTML Div Using JavaScript and jsPDF?

PDF aus HTML in Div mit JavaScript generieren

Problem

Sie haben HTML-Code, der ein Div mit der gewünschten ID „pdf“ enthält um mithilfe von JavaScript in eine PDF-Datei mit dem Namen „foobar.pdf“ zu drucken. Allerdings akzeptiert jspdf nur Zeichenfolgenwerte und verfügt nicht über eine Funktion zum Drucken von HTML.

Lösung

Um jsPDF zum Drucken von HTML zu aktivieren, müssen Sie die folgenden Plugins in Ihr einbinden Projekt:

jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js

Außerdem, wenn Sie bestimmte Elemente in der ignorieren möchten HTML können Sie sie mit einer ID markieren und dann einen speziellen Elementhandler in jsPDF verwenden, um diese Elemente vom Drucken auszuschließen. Zum Beispiel der aktualisierte HTML-Code mit einem ignorierten Element:

<!DOCTYPE html>
<html>
  <body>
    <p>

Nach dem Login kopieren

JavaScript-Code

Dieser JavaScript-Code generiert ein PDF mit dem Inhalt des „pdf“-Div und öffnet es in einem Neues 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

Hinweise

Sie können Element-IDs nur zum Ausschluss in Element-Handlern verwenden. Klassenselektoren werden nicht unterstützt.
jsPDF ignoriert CSS-Stile, kann aber Überschriften (h1, h2 usw.) und Text innerhalb von Textknoten formatieren. Elemente wie Textbereiche werden zum Drucken nicht unterstützt.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript und jsPDF ein PDF aus einem HTML-Div generieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!