So verwenden Sie js oder php, um HTML-Webseiten in PDF zu konvertieren

Autor：Eve Cole Aktualisierungszeit：2024-12-13 08:48:02

Der Herausgeber von Downcodes bietet Ihnen ein Tutorial zur Verwendung von JavaScript und PHP zum Konvertieren von HTML-Webseiten in PDF-Dateien. In diesem Artikel werden zwei Methoden detailliert beschrieben: die Verwendung der JavaScript-Bibliothek jsPDF und die Verwendung der PHP-Bibliothek TCPDF oder mPDF. Die jsPDF-Bibliothek ermöglicht die Konvertierung direkt auf der Clientseite, während die PHP-Bibliothek eine Verarbeitung auf der Serverseite erfordert. Wir werden uns darauf konzentrieren, die Verwendung von jsPDF zu erklären und Codebeispiele bereitzustellen. Dabei werden wir die Schritte der Einführung von Bibliotheken, der Verarbeitung von HTML-Inhalten, der Erstellung von PDF-Instanzen, der Anpassung von Formaten, dem Speichern von Dateien usw. abdecken. Außerdem werden wir kurz die Konvertierungsmethode und erweiterte Funktionen mit PHP vorstellen . Implementierung, wie das Hinzufügen von Bildern, Wasserzeichen, Kopf- und Fußzeilen usw. Unabhängig davon, für welche Methode Sie sich entscheiden, hilft Ihnen dieser Artikel dabei, die Konvertierung von HTML in PDF effizient durchzuführen.

Das Konvertieren von Webseiten in PDF ist eine häufige Anforderung, die es uns ermöglicht, Website-Inhalte in einem festen Format zu speichern. Die Verwendung von JavaScript oder PHP zum Konvertieren von HTML-Webseiten in PDF umfasst: die Verwendung von JavaScript-Bibliotheken und die Verwendung von PHP-Bibliotheken. Unter diesen Konvertierungstools sind JavaScript-Bibliotheken wie jsPDF und html2pdf.js sehr beliebt, während PHP über Bibliotheken wie TCPDF oder mPDF verfügt. Wir werden uns auf die Verwendung der jsPDF-Bibliothek für die Konvertierung konzentrieren. Dies liegt daran, dass die jsPDF-Bibliothek eine gute Client-Unterstützung bietet, einfach zu bedienen ist und die Konvertierung ohne Kommunikation mit dem Server durchführen kann.

jsPDF ist eine in reinem JavaScript geschriebene Bibliothek, die in einer Front-End-Umgebung funktioniert und keine Back-End-Unterstützung erfordert. Um jsPDF verwenden zu können, müssen Sie zunächst seine Bibliotheksdatei in das Projekt einführen. Sie können es aus dem GitHub-Repository von jsPDF oder über npm installieren. Sobald die jsPDF-Bibliothek eingeführt ist, können Sie JavaScript-Code verwenden, um den Inhalt von HTML zu lesen und die von jsPDF bereitgestellte API zum Generieren von PDF-Dateien verwenden.

1. Einführung der JSPDF-Bibliothek

Um den Konvertierungsprozess zu starten, müssen Sie zunächst jsPDF in Ihre Webseite importieren. Sie können die jsPDF-Bibliothek direkt herunterladen und übergeben

Oder mit npm installieren:

npm jspdf installieren

Importieren Sie es dann in Ihre JavaScript-Datei:

import { jsPDF } aus jspdf;

2. Wählen Sie HTML-Inhalte aus und ändern Sie sie

Vor dem Generieren der PDF-Datei möchten Sie möglicherweise den HTML-Code ändern, um sicherzustellen, dass die konvertierte PDF-Datei Ihren Anforderungen entspricht. Beispielsweise müssen Sie möglicherweise bestimmte Seitenelemente ausblenden und nur den Hauptinhalt behalten.

// Holen Sie sich die HTML-Elemente, die konvertiert werden müssen

const element = document.getElementById('content-to-pdf');

// HTML-Inhalt ändern, z. B. unnötige Elemente ausblenden

element.querySelectorAll('.no-print').forEach(element => element.style.display = 'none');

3. Erstellen Sie eine JSPDF-Instanz und konvertieren Sie HTML

Erstellen Sie eine neue jsPDF-Instanz und verwenden Sie die von jsPDF bereitgestellte API, um HTML-Elemente zu lesen und in das PDF-Format zu konvertieren.

const doc = new jsPDF();

// Angenommen, Sie möchten, dass die Seite in einer PDF-Datei im A4-Format gerendert wird

doc.html(document.body, {

Rückruf: Funktion (doc) {

doc.save('webpage.pdf');

x: 10,

Jahr: 10,

Breite: 190,

windowWidth: document.body.scrollWidth

});

4. Passen Sie das Format und Layout der PDF-Datei an

Während des Konvertierungsprozesses müssen Sie möglicherweise das Format und Layout der PDF-Datei anpassen, z. B. Seitengröße, Ränder oder ob Sie im Querformat drucken möchten usw.

const doc = new jsPDF({

Ausrichtung: 'p', // Hochformat

Einheit: 'mm', // Die Einheit ist Millimeter

Format: 'a4', // Das Format ist A4-Papier

});

5. PDF-Dateien speichern

Sobald der HTML-Inhalt in PDF konvertiert wurde, können Sie die Datei mit der Methode save() speichern oder die resultierenden PDF-Daten anderweitig verarbeiten.

doc.save('converted-webpage.pdf'); // PDF-Datei speichern

6. Verwenden Sie PHP, um HTML in PDF zu konvertieren

Wenn Sie serverseitig eine HTML-zu-PDF-Konvertierung durchführen möchten, können Sie PHP-Bibliotheken wie TCPDF oder mPDF verwenden. Um diese Bibliotheken verwenden zu können, müssen Sie sie zunächst in Ihre PHP-Umgebung einführen, normalerweise über Composer.

Composer benötigen tecnickcom/tcpdf

Erstellen Sie dann im PHP-Skript ein TCPDF-Objekt und verwenden Sie die vom Objekt bereitgestellten Methoden, um den HTML-Code in das PDF-Format zu konvertieren.

require_once('tcpdf_include.php');

//Erstelle ein neues PDF-Dokument

$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);

//Dokumentinformationen festlegen

$pdf->SetCreator(PDF_CREATOR);

$pdf->SetAuthor('Ihr Name');

$pdf->SetTitle('TCPDF-Beispiel 001');

$pdf->SetSubject('TCPDF Tutorial');

$pdf->SetKeywords('TCPDF, PDF, Beispiel, Test, Anleitung');

//Eine Seite hinzufügen

$pdf->AddPage();

//Inhalt festlegen

$html = '

Willkommen bei TCPDF!

$pdf->writeHTML($html, true, false, true, false, '');

// PDF ausgeben

$pdf->Output('example_001.pdf', 'I');

7. Stil- und Schriftartenverwaltung

Bei der PDF-Konvertierung möchten Sie möglicherweise die Stile und Schriftarten im Dokument berücksichtigen, um sicherzustellen, dass die resultierende PDF-Datei den Stil des Webinhalts beibehält.

Sowohl jsPDF als auch TCPDF bieten grundlegende Unterstützung für Stile. Sie können CSS-Stile direkt in HTML verwenden oder Stile beim Generieren von PDF anwenden. Da PDFs jedoch nicht genauso gerendert werden wie Webseiten, kann es zu geringfügigen Unterschieden kommen. Für jsPDF kann die CSS-Unterstützung durch Plug-Ins erweitert werden. Bei TCPDF müssen Sie das CSS sorgfältig anpassen, um die besten Ergebnisse zu erzielen.

doc.setFont(helvetica);

doc.setFontStyle(bold);

doc.setFontSize(16);

doc.text(Hello World!, 10, 10);

$html = '

Dies ist ein blauer Titel.

$pdf->writeHTML($html, true, false, true, false, '');

8. Erweiterte Funktionen und Anpassung

Während des PDF-Konvertierungsprozesses müssen Sie sich möglicherweise auch mit einigen erweiterten Funktionen befassen, z. B. dem Hinzufügen von Kopf- und Fußzeilen, Wasserzeichen, Tabellen, Bildern usw. Diese Funktionen werden im Allgemeinen in den jsPDF- und TCPDF-Bibliotheken unterstützt, sie werden jedoch etwas anders implementiert. Je nach Bedarf können Sie die entsprechende Bibliotheksfunktion aufrufen, um dies zu erreichen.

jsPDF bietet verschiedene Methoden zur Erweiterung der Funktionalität von PDF, z. B. addImage() zum Hinzufügen von Bildern, setProperties() zum Festlegen von Dokumenteigenschaften usw.

// Bild hinzufügen

doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);

TCPDF bietet außerdem leistungsstarke Funktionen zur Verarbeitung erweiterter PDF-Inhalte.

// Header setzen

$pdf->setHeaderData('', 0, 'Title', 'Header', array(0,64,255), array(0,64,128));

$pdf->setHeaderFont(Array('helvetica', '', 10));

//Wasserzeichen hinzufügen

$pdf->SetAlpha(0.3);

$pdf->Image('watermark.png', 25, 110, 160, 40, '', '', '', false, 300, '', false, false, 0);

//Vollständige Transparenz wiederherstellen

$pdf->SetAlpha(1);

Zusammenfassend lässt sich sagen, dass die Verwendung von JavaScript oder PHP zum Konvertieren von HTML-Webseiten in PDF-Dateien die Auswahl einer geeigneten Bibliothek, die Verarbeitung von Webseiteninhalten, die Anpassung des PDF-Layouts und die Nutzung der erweiterten Funktionen der Bibliothek zur Erfüllung komplexer Anpassungsanforderungen erfordert. Unabhängig davon, ob Sie jsPDF auf der Clientseite oder TCPDF auf der Serverseite wählen, sind die grundlegenden Implementierungsschritte und -methoden ähnlich. Bei der konkreten Umsetzung müssen die am besten geeigneten Werkzeuge und Methoden basierend auf den tatsächlichen Anforderungen und der Umgebung des Projekts ausgewählt werden.