Cómo generar un PDF desde HTML en una aplicación React/Node.js

Generar PDF desde una página web puede parecer una acción bastante simple que requiere poco tiempo y esfuerzo. Sin embargo, la realidad es algo diferente, y encontrar la mejor solución a menudo puede ser un reto.

Consideremos este escenario hipotético:

Tenemos una app de React con la que nos gustaría crear un PDF ya sea de toda la página o solo de una parte. Nuestro documento PDF podría contener gráficos, tablas, imágenes y/o texto plano y debería estar estructurado sin cortes ni superposiciones. También queremos un botón en la página que nos permita guardar el documento.

En este artículo te mostraré distintas soluciones y resumiré las ventajas e inconvenientes de cada una. Empezaremos con el método más simple y avanzaremos hacia el más complejo.

Usar la impresión nativa del navegador con reglas de impresión en CSS

En general, un navegador ya puede guardar e imprimir PDFs de nuestras páginas: basta con pulsar Ctrl/Cmd + P para abrir la ventana de impresión y personalizar su apariencia. 

Crear un botón que haga lo mismo sería así:

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

Si queremos cambiar su apariencia, ocultar ciertos elementos o modificar el tamaño de los elementos en el PDF, podemos escribir reglas de impresión en CSS:

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

También puede que queramos gestionar los saltos de página y/o evitar superposiciones. Esto se consigue con propiedades de estilo específicas, como en este ejemplo:

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

Aquí tienes un excelente artículo gratuito con más cosas que puedes hacer usando estas reglas de impresión en CSS.

Para algo pequeño y sencillo, esta es una solución ideal y usar librerías sería sobredimensionar el problema.  Pero no es tan adecuada cuando se necesita acceso a documentos generados desde el código. 

Ventajas: 

No requiere librerías externas

Es fácil de implementar, incluso con ajustes de orientación de página.

No sobrecarga el equipo del usuario

Permite seleccionar y buscar texto

Desventajas:

Puede ser problemático obtener resultados idénticos en distintos navegadores

El botón de guardar puede variar según el navegador y resultar difícil de localizar

No hay acceso desde el código al PDF generado

El contenido del PDF depende del tamaño de la ventana del navegador

Hacer una captura del DOM (HTML => Canvas => Imagen => PDF)

Aquí tienes otra solución sencilla: basta con hacer una captura de la página o del elemento y convertirla en un documento PDF con Canvas y transformación a imagen:

html2canvas para crear una captura desde HTML y generar un Canvas a partir de ella

jsPDF para transformar una imagen en PDF

La parte de Canvas => Imagen podemos hacerla con JavaScript puro.  Así, la función quedaría así:

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

Como ves, es posible aplicar algunos estilos antes de la transformación de HTML => Canvas.

Sin embargo, si el HTML es largo quizá quieras repartir distintos elementos en páginas separadas. Para ello, crea una captura de varios elementos y combínalas en un único documento PDF:

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

De este modo, puedes crear PDFs decentes que se vean como el HTML original y ahora tienes control tanto sobre la apariencia del documento como sobre qué elementos incluir en él.  La desventaja, sin embargo, es que no se puede seleccionar ni buscar el texto.  

Ventajas:

Se parece mucho al HTML

Implementación sencilla

Permite acceder al PDF generado desde el código

Desventajas:

El usuario no puede seleccionar ni buscar texto, especialmente con avisos de cookies presentes.

El contenido del PDF depende del tamaño de la ventana del navegador

Requiere paquetes externos

Usar librerías de PDF / JavaScript

jsPDF (como se mencionó), PDFKit, React-pdf son librerías que puedes usar para crear PDF en React; sin embargo, persiste un problema: todo el HTML y el CSS deben crearse específicamente para tu documento PDF.

En nuestro escenario, entonces, esta solución también es insuficiente, ya que preferimos simplemente copiar nuestro HTML con cambios mínimos, no reescribirlo con variaciones del mismo diseño. Aun así, es una opción útil si quieres crear un PDF desde cero usando información de otra fuente.

Así se ve con React-pdf:

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

Ventajas:

Permite acceder al PDF generado desde el código

El contenido del PDF no depende del tamaño de la ventana del navegador ni de la fecha de creación.

El resultado es idéntico en distintos navegadores

 Permite seleccionar y buscar texto

Desventajas:

No permite copiar el HTML existente en la página

Puede consumir bastante tiempo.

El código probablemente contendrá dos variaciones del mismo diseño

Usar Puppeteer, Headless Chrome con Node.js

Dado que su código se escribe en el back-end, esta solución es la más compleja y distinta de las totalmente del lado del cliente mencionadas arriba. 

En otras palabras, Puppeteer es un navegador que puedes ejecutar desde Node.js.  Y según la documentación, puede usarse para generar capturas y PDFs de páginas. 

He aquí un ejemplo que navega directamente a la URL, cambia algunos estilos y genera un archivo PDF:

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

Una vez creado, el documento se envía de vuelta al front-end.  En el lado del cliente, se recupera, se transforma en blob y se guarda. 

Así:

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

Esta parece la solución más completa, ya que ofrece el mayor número de beneficios y puede abordar incluso los casos más difíciles.  Además, el documento que genera permite seleccionar y buscar texto y también puede guardarse en el servidor sin llamadas adicionales a la API.  

Ventajas:

Permite acceder al PDF generado desde el código

El contenido del PDF no depende del tamaño de la ventana del navegador

Permite seleccionar y buscar texto

Es muy similar al HTML

No sobrecarga el equipo del usuario

Desventajas: 

Requiere código en cliente y servidor

La implementación puede ser complicada en algunos casos

Conclusión

Como hemos visto, generar PDFs desde HTML puede ser problemático.  Pero no tiene por qué serlo, y los ejemplos anteriores son solo algunas opciones que puedes considerar para abordar el asunto.  Con un poco de prueba y error superarás el bache, así que prueba distintas opciones para determinar cuál funciona mejor para ti. 

¡Y mucha suerte!

Si quieres saber más, contáctanos - hello@start-up.house

Preguntas frecuentes

¿Cómo puedo guardar toda mi página HTML como un documento PDF usando React?

• Usando varios métodos comentados en el artículo, puedes convertir tu página HTML en un documento PDF. Una forma sencilla es usar la impresión nativa del navegador con reglas de impresión en CSS.

¿Qué librerías pueden ayudar a convertir HTML a PDF en una app de React?

• React PDF, PDFKit y jsPDF son algunas librerías populares para este fin. Sin embargo, si usas específicamente la librería React PDF, es crucial utilizar los componentes adecuados de React PDF para conseguir el resultado deseado.

¿Al exportar una página HTML a un archivo PDF se conservan el color de fondo y las fuentes personalizadas?

• Depende en gran medida del método que uses. Algunos métodos pueden no conservar el color de fondo y las fuentes personalizadas, pero otros, especialmente los que usan Puppeteer o librerías dedicadas, a menudo sí lo hacen.

Cuando intento crear un documento PDF desde mi app de React, el color de fondo difiere del de mi página HTML original. ¿Por qué?

• La reproducción exacta del color de fondo al convertir una página HTML a PDF puede verse afectada por el método o la librería que estés usando. Es importante asegurarte de que el método o la librería elegidos admiten la preservación del color de fondo.

¿Es posible exportar el contenido predeterminado de mi proyecto de React a un archivo PDF?

• Sí, según el contenido y la estructura de tu app de React, puedes usar herramientas y librerías para exportar el contenido predeterminado a un archivo PDF sin problemas.

¿Puedo convertir una cadena HTML en un documento PDF usando jsPDF en una app de React?

• Sí, con jsPDF puedes convertir HTML, incluidas cadenas HTML, en documentos PDF. Combinarlo con otras herramientas o librerías puede agilizar aún más el proceso de conversión en una app de React.

¿Cuáles son las principales diferencias entre convertir HTML a PDF y tomar una captura usando el método del DOM en una app de React?

• Al convertir HTML a PDF directamente, el PDF resultante suele permitir la selección y búsqueda de texto. Sin embargo, al usar el método de captura (HTML => Canvas => Imagen => PDF), el PDF es esencialmente una imagen, por lo que puede que no sea posible seleccionar el texto.

¿Cómo puedo asegurar un color de fondo consistente al convertir mi página HTML a un documento PDF?

• Usar librerías o herramientas dedicadas que prioricen la preservación de estilos, como Puppeteer o React PDF, puede ayudar a mantener consistente el color de fondo durante la conversión.

Entre crear un archivo PDF desde cero con React PDF y convertir HTML a PDF, ¿qué método es más eficiente en tiempo?

• Convertir el HTML existente a PDF suele ser más rápido porque reutilizas el contenido. Crear un archivo PDF desde cero con React PDF puede llevar más tiempo, especialmente si el diseño es complejo.

¿Cómo manejo archivos PDF grandes al convertir una página HTML extensa usando React?

• Si trabajas con una página HTML larga, es aconsejable dividir el contenido en secciones o páginas para mejorar la legibilidad. Librerías como Puppeteer ofrecen funciones para gestionar y paginar contenido extenso de forma eficaz.

¿Qué es el proceso 'html to pdf react' en el desarrollo web? 

• El proceso 'html to pdf react' se refiere al método de convertir contenido HTML dentro de una aplicación React en un documento PDF. Normalmente se hace con librerías que capturan la estructura y el estilo del HTML para crear un archivo PDF que pueda guardarse, imprimirse o compartirse.

¿Qué librerías se usan comúnmente para conversiones 'html to pdf react'? 

• Las librerías populares para conversiones 'html to pdf react' incluyen jsPDF y html2canvas. Estas librerías trabajan juntas para capturar el HTML renderizado por los componentes de React y convertirlo a formato PDF, conservando el diseño y los estilos lo más fielmente posible.

¿Existen desafíos en el proceso 'html to pdf react'? 

• Uno de los principales desafíos en el proceso 'html to pdf react' es garantizar que el PDF convertido refleje con precisión el contenido HTML original en términos de diseño, estilos e interactividad. Gestionar datos dinámicos y documentos grandes de manera eficiente también es un reto común para los desarrolladores.

¿Cómo puedo asegurar una salida de alta calidad en el proceso 'html to pdf react'? 

• Para asegurar una salida de alta calidad en el proceso 'html to pdf react', elige librerías fiables, prueba la conversión con distintos tipos de contenido y considera implementar soluciones personalizadas para diseños complejos o datos dinámicos. Mantener el código actualizado y optimizado también contribuye a obtener PDFs de mejor calidad.

¿Es posible manejar contenido interactivo en conversiones 'html to pdf react'? 

• Aunque se puede manejar interactividad básica en el proceso 'html to pdf react', es posible que elementos interactivos complejos como efectos hover o enlaces clicables no se reproduzcan completamente en el PDF. El foco suele estar en capturar con precisión la presentación visual más que los aspectos interactivos.