Wie erstelle ich mit JavaScript ein PDF aus einem HTML-Div?-js-Tutorial-php.cn

Wie erstelle ich mit JavaScript ein PDF aus einem HTML-Div?

Mary-Kate Olsen

Freigeben： 2024-12-04 03:16:10

Original

320 Leute haben es durchsucht

How to Generate a PDF from an HTML Div Using JavaScript?

Generieren einer PDF-Datei aus HTML-Inhalten in einem Div mit JavaScript

Um eine PDF-Datei zu generieren, die den Inhalt eines bestimmten HTML-Div-Elements enthält, können wir die JavaScript-Bibliothek verwenden jsPDF. Da die Textfunktion von jsPDF jedoch nur Zeichenfolgen akzeptiert, müssen wir zusätzliche Plugins integrieren, um das HTML-Rendering zu ermöglichen.

Schritt 1: Erforderliche Plugins einschließen

Laden Sie von der jsPDF-Website die neueste Version von jsPDF herunter und fügen Sie die folgenden Skripte in Ihr ein Projekt:

jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.s plit_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js

Schritt 2: Unerwünschte Elemente ignorieren

Wenn Sie bestimmte Elemente aus dem PDF ausschließen möchten, weisen Sie ihnen in Ihrem HTML-Code eindeutige IDs zu. Anschließend können Sie die speziellen Elementhandler von jsPDF verwenden, um diese Elemente während der Konvertierung zu ignorieren.

Um beispielsweise ein Element mit der ID „ignorePDF“ zu ignorieren:

<p>

Nach dem Login kopieren

Schritt 3: HTML konvertieren in PDF

Erstellen Sie ein neues jsPDF-Dokument und definieren Sie eine Elementhandlerfunktion, um die von Ihnen verwendeten Elemente zu ignorieren markiert.

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

Nach dem Login kopieren

Schritt 4: PDF ausgeben

Um das generierte PDF in einem neuen Fenster anzuzeigen, verwenden Sie den folgenden Code:

doc.output("dataurlnewwindow");

Nach dem Login kopieren

Der Download erfolgt automatisch die PDF-Datei mit dem Namen „foobar.pdf“ mit dem Inhalt des von Ihnen angegebenen div-Elements.

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