PDF aus HTML in einer React-/Node.js-App erstellen

Ein PDF von einer Webseite zu erzeugen wirkt wie eine einfache Aufgabe, die wenig Zeit und Aufwand erfordert. In der Praxis ist das jedoch anders, und die beste Lösung zu finden, kann oft herausfordernd sein.

Schauen wir uns dieses hypothetische Szenario an:

Wir haben eine React App, mit der wir ein PDF entweder von der gesamten Seite oder nur von einzelnen Bereichen erzeugen möchten. Unser PDF kann Charts, Tabellen, Bilder und/oder reinen Text enthalten und sollte ohne abgeschnittene Inhalte oder Überlappungen strukturiert sein. Außerdem möchten wir einen Button auf der Seite, mit dem sich das Dokument speichern lässt.

In diesem Artikel führe ich dich durch mehrere Lösungen und zeige jeweils die Vor- und Nachteile auf. Wir starten mit der simpelsten Methode und steigern uns bis zur komplexesten.

Native Browser-Druckfunktion mit CSS-Druckregeln verwenden

Grundsätzlich kann ein Browser unsere Seiten bereits als PDF speichern und drucken: Einfach Strg/Cmd + P drücken, um das anpassbare Druck-Dialogfenster zu öffnen.

Einen Button zu erstellen, der dieselbe Aktion ausführt, geht so:

const SavePdfButton=()=>{
	return (
		<button onClick={window.print()}>Download PDF</button>
	)
}

Wenn wir das Erscheinungsbild ändern, bestimmte Elemente ausblenden oder die Größe von Elementen im PDF anpassen möchten, können wir CSS-Druckregeln schreiben:

@media print {
	.save-button {
		display: none;
	}
	.content {
		width: 100%;
	}
}

Wir wollen vielleicht auch Seitenumbrüche steuern und/oder Überlappungen vermeiden. Das lässt sich mit spezifischen CSS-Eigenschaften erreichen, etwa so:

@media print {
	h1 {
		break-before: always;
	}
	table, img, svg {
		break-inside: avoid;
	}
}

Hier ist ein sehr guter, kostenloser Artikel, der zeigt, was mit CSS-Druckregeln noch möglich ist.

Für kleine und einfache Fälle ist das die ideale Lösung – der Einsatz von Libraries wäre hier überdimensioniert.  Weniger geeignet ist sie allerdings, wenn ein programmatischer Zugriff auf die generierten Dokumente benötigt wird. 

Pros: 

Keine externen Libraries erforderlich

Einfache Implementierung, inklusive Anpassungen wie Ausrichtung

Belastet den Rechner der Nutzer nicht

Text bleibt auswähl- und durchsuchbar

Cons:

In verschiedenen Browsern kann die Darstellung abweichen

Save-Buttons sind aufgrund unterschiedlicher Browser-Darstellung teils schwer zu finden

Kein programmatischer Zugriff auf die generierten PDFs

Der PDF-Inhalt hängt von der Größe des Browserfensters ab

Screenshot aus dem DOM erstellen (HTML => Canvas => Image => PDF)

Eine weitere einfache Lösung: Mache einen Screenshot der Seite oder eines Elements und wandle ihn per Canvas und Bildumwandlung in ein PDF um:

html2canvas, um aus HTML einen Screenshot zu erzeugen und daraus ein Canvas zu generieren

jsPDF, um ein Bild in PDF zu transformieren

Den Teil Canvas => Image können wir mit Vanilla JavaScript erledigen.  Die Funktion sieht dann so aus:

import html2canvas from 'html2canvas'
import jsPdf from 'jspdf';

function savePdf(){
	const domElement=document.querySelector('#container')
	html2canvas(domElement, { onclose: (document)=>{
	document.querySelector('#save-button').style.visibility='hidden'
	}})
.then((canvas)=>{
	const img=canvas.toDataURL('image/jpeg')
	const pdf=new jsPdf()
	pdf.addImage(imgData, 'JPEG',0,0,width,height)
	pdf.save('filename.pdf')
})
}

Wie du siehst, lassen sich vor der HTML => Canvas-Umwandlung noch Styles hinzufügen.

Wenn das HTML jedoch lang ist, möchtest du Inhalte vielleicht auf mehrere Seiten verteilen. Erzeuge dafür Screenshots aus mehreren Elementen und kombiniere sie in einem PDF-Dokument:

import html2canvas from 'html2canvas'
import jsPdf from 'jspdf'

function savePdf(){
	const domElements=document.querySelectorAll('.container')
	const pdf=new jsPdf()
	
	domElements.forEach((element,i)=>{
	const img=canvas.toDataURL('image/jpeg')
	pdf.addImage(imgData,'JPEG',0,0,width,height)
	const isSectionLast=domElements.length===i+1;
	
	if(isSectionLast){
		pdf.save('filename.pdf')
	}else{
		doc.addPage()
	}
	}
}

So lassen sich ansehnliche PDFs erzeugen, die dem ursprünglichen HTML sehr ähnlich sehen, und du behältst die Kontrolle über Aussehen und enthaltene Elemente.  Der Nachteil ist jedoch, dass Text weiterhin nicht markier- oder durchsuchbar ist.  

Pros:

Sehr nahe an der HTML-Darstellung

Einfache Implementierung

Programmatischer Zugriff auf das generierte PDF

Cons:

Text kann nicht ausgewählt und durchsucht werden, insbesondere wenn Cookie-Hinweise eingeblendet sind

Der PDF-Inhalt hängt von der Größe des Browserfensters ab

Externe Pakete erforderlich

PDF-/JavaScript-Libraries verwenden

jsPDF (siehe oben), PDFKit, React-pdf sind Libraries, mit denen du in React PDFs erstellen kannst. Das Problem bleibt jedoch bestehen: HTML und CSS müssen speziell für das PDF-Dokument aufgebaut werden.

In unserem Szenario ist diese Lösung daher ebenfalls nicht ideal, da wir unser vorhandenes HTML mit nur kleinen Anpassungen übernehmen möchten, statt das Design ein zweites Mal in Variationen umzusetzen. Nützlich ist sie aber, wenn du ein PDF von Grund auf aus anderen Datenquellen erzeugen willst.

So sieht es mit React-pdf aus:

import {Page,Text,View,Document,StyleSheet} from "@reat-pdf/renderer';

const styles=StyleSheet.create({
	page:{
		backgroundColor: "#E4E4E4"
	},
	section:{
		margin: 10,
	}
})

const MyDocument=()=>{
	<Document>
		<Page size="A4" style={styles.page}>
			<View style={styles.section}>
				<Text>Section</Text>
			</View>
		</Page>
	</Document>
}

Pros:

Programmatischer Zugriff auf das generierte PDF

Der PDF-Inhalt ist nicht von der Fenstergröße oder dem Zeitpunkt der Erstellung abhängig.

Das Ergebnis ist in unterschiedlichen Browsern identisch

 Text ist auswähl- und durchsuchbar

Cons:

Vorhandenes On-Page-HTML lässt sich nicht einfach übernehmen

Kann zeitaufwendig sein

Zwei Varianten desselben Designs im Code (doppelter Pflegeaufwand)

Puppeteer, Headless Chrome mit Node.js verwenden

Diese Lösung ist die komplexeste, da der Code im Back-End läuft und sich damit von den rein Client-seitigen Ansätzen unterscheidet. 

Anders gesagt: Puppeteer ist ein Browser, den du aus Node.js heraus steuern kannst.  Laut Doku lassen sich damit Screenshots und PDFs von Seiten generieren. 

Hier ein Beispiel, das direkt zu einer URL navigiert, einige Styles ändert und eine PDF-Datei erzeugt:

const puppeter=require('puppeteer')

async function savePdf(){
	const browser=await puppeteer.launch({headless: true})
	const page=await browser.newPage();
	await page.goto('https://start-up.house',{waitUntil:'networkidle0'});
	await page.addStyleTag({content: '#save-button {display: none}'})
	const pdf=await page.pdf({format: 'A4'});
	await browser.close();
	return pdf;
}

Nach der Erstellung wird das Dokument an das Front-End zurückgesendet.  Auf der Client-Seite wird es abgeholt, in einen Blob umgewandelt und gespeichert. 

So etwa:

function savePdf(){
	return fetchPdfData().then((pdfData)=>{
		const blob=new Blob([pdfData],{type: 'application/pdf'})
		const link=document.createElement('a')
		link.href=window.URL.createObjectURL(blob)
		link.download='file-name.pdf'
		link.click()
	}
}

Das ist die umfassendste Lösung, da sie die meisten Vorteile bietet und selbst schwierige Fälle abdeckt.  Außerdem bleibt der Text im Dokument auswähl- und durchsuchbar, und das PDF kann ohne zusätzliche API-Calls direkt auf dem Server gespeichert werden.  

Pros:

Programmatischer Zugriff auf das generierte PDF

Der PDF-Inhalt ist nicht von der Größe des Browserfensters abhängig

Text ist auswähl- und durchsuchbar

Sehr nahe an der HTML-Darstellung

Belastet den Rechner der Nutzer nicht

Cons: 

Erfordert Client- und Server-seitigen Code

Implementierung kann je nach Fall komplex sein

Fazit

Wie wir gesehen haben, kann das Erzeugen von PDFs aus HTML knifflig sein.  Das muss es aber nicht, und die oben genannten Beispiele sind nur einige der Optionen, die du in Betracht ziehen kannst.  Mit etwas Ausprobieren kommst du schnell ans Ziel – teste unterschiedliche Ansätze, um die für dich beste Lösung zu finden. 

Viel Erfolg!

Wenn du mehr wissen möchtest, kontaktiere uns – hello@start-up.house

FAQs

Wie kann ich meine komplette HTML-Seite in React als PDF speichern?

• Mit den im Artikel beschriebenen Methoden kannst du deine HTML-Seite in ein PDF konvertieren. Ein direkter Weg ist die native Browser-Druckfunktion mit CSS-Druckregeln.

Welche Libraries helfen dabei, HTML zu PDF in einer React App umzuwandeln?

• React PDF, PDFKit und jsPDF sind beliebte Libraries. Wenn du speziell React PDF verwendest, ist es wichtig, die passenden React PDF-Komponenten korrekt einzusetzen.

Bleiben Hintergrundfarbe und Custom Fonts beim Export von HTML nach PDF erhalten?

• Das hängt von der Methode ab. Manche Wege übernehmen Hintergrundfarben und Fonts nicht zuverlässig, während Tools wie Puppeteer oder spezialisierte Libraries dies oft ermöglichen.

Warum weicht die Hintergrundfarbe im PDF von meiner HTML-Seite ab?

• Die exakte Reproduktion der Hintergrundfarbe hängt stark von der verwendeten Methode oder Library ab. Achte darauf, dass das gewählte Tool die Übernahme von Hintergrundfarben unterstützt.

Kann ich Standardinhalte meiner React App in eine PDF-Datei exportieren?

• Ja, je nach Inhalt und Struktur deiner React App kannst du Tools und Libraries nutzen, um Standardinhalte reibungslos als PDF zu exportieren.

Kann ich in einer React App einen HTML-String mit jsPDF in ein PDF umwandeln?

• Ja, mit jsPDF kannst du HTML, inklusive HTML-Strings, in PDF-Dokumente konvertieren. In Kombination mit weiteren Tools oder Libraries lässt sich der Prozess in React zusätzlich vereinfachen.

Was sind die Hauptunterschiede zwischen HTML-zu-PDF und dem Screenshot-DOM-Verfahren in React?

• Bei der direkten HTML-zu-PDF-Konvertierung bleibt Text im PDF meist auswähl- und durchsuchbar. Beim Screenshot-Verfahren (HTML => Canvas => Image => PDF) ist das Ergebnis ein Bild; Textauswahl ist dann in der Regel nicht möglich.

Wie sorge ich für eine konsistente Hintergrundfarbe beim Konvertieren meiner HTML-Seite in PDF?

• Nutze Libraries oder Tools, die Styles priorisiert erhalten, etwa Puppeteer oder React PDF. Das erhöht die Chance, dass die Hintergrundfarbe konsistent bleibt.

Was ist effizienter: ein PDF mit React PDF neu erstellen oder HTML zu PDF konvertieren?

• Die Konvertierung von bestehendem HTML zu PDF ist meist schneller, da du vorhandene Inhalte nutzt. Ein PDF von Grund auf mit React PDF zu bauen, kann bei komplexem Design zeitintensiver sein.

Wie gehe ich mit großen PDF-Dateien um, wenn ich lange HTML-Seiten in React konvertiere?

• Teile lange Inhalte in Abschnitte oder Seiten, um Lesbarkeit und Performance zu verbessern. Libraries wie Puppeteer bieten Funktionen, um lange Inhalte sauber zu paginieren.

Was bedeutet der Prozess 'html to pdf react' in der Webentwicklung? 

• Der 'html to pdf react'-Prozess bezeichnet die Umwandlung von HTML-Inhalten innerhalb einer React-Anwendung in ein PDF-Dokument. Das geschieht typischerweise mit Libraries, die Struktur und Styling übernehmen, sodass das PDF gespeichert, gedruckt oder geteilt werden kann.

Welche Libraries werden häufig für 'html to pdf react' verwendet? 

• Beliebte Libraries für 'html to pdf react' sind jsPDF und html2canvas. Sie arbeiten zusammen, um das von React gerenderte HTML zu erfassen und in ein PDF zu überführen – Layout und Styles bleiben so weit wie möglich erhalten.

Gibt es Herausforderungen im 'html to pdf react'-Prozess? 

• Eine zentrale Herausforderung ist, dass das PDF Layout, Styles und Inhalt möglichst exakt widerspiegelt. Auch der Umgang mit dynamischen Daten und sehr großen Dokumenten ist oft herausfordernd.

Wie erreiche ich hohe Qualität im 'html to pdf react'-Prozess? 

• Setze auf zuverlässige Libraries, teste mit unterschiedlichen Inhalten und erwäge bei komplexen Layouts oder dynamischen Daten maßgeschneiderte Lösungen. Regelmäßige Updates und Code-Optimierung verbessern die PDF-Qualität zusätzlich.

Kann interaktiver Inhalt bei 'html to pdf react' berücksichtigt werden? 

• Grundlegende Interaktivität lässt sich teils abbilden, komplexe Effekte wie Hover-States oder klickbare Interaktionen werden im PDF jedoch nicht vollständig repliziert. Im Fokus steht üblicherweise die korrekte visuelle Darstellung, nicht die Interaktivität.