.png)
.svg){kind=icon}
Marzo 14, 2025
•
10
min leer
Guía completa para generar PDF con Puppeteer: desde documentos sencillos hasta informes complejos
George Miloradovich
Investigador, redactor y entrevistador de casos prácticos
Puppeteer es una biblioteca de Node.js que automatiza los navegadores Chrome o Chromium, lo que la convierte en una potente herramienta para crear archivos PDF. Ya sea que cree documentos sencillos o informes complejos, Puppeteer ofrece funciones como compatibilidad nativa con PDF, diseños personalizados y integración de automatización para agilizar el proceso.
Puppeteer es perfecto para automatizar flujos de trabajo, generar informes o exportar contenido web. Desde empresas que crean documentos de marca hasta desarrolladores que gestionan visualizaciones de datos, Puppeteer simplifica el proceso y garantiza resultados de alta calidad.
Si está listo para comenzar, el artículo lo guiará a través de la configuración, la personalización y las funciones avanzadas, como el manejo de informes grandes y la solución de problemas comunes.
Latenode tiene una integración directa con un Headless Browser basado en Puppeteer, que le permite integrar esta biblioteca en sus escenarios de automatización para extraer datos de sitios web, tomar capturas de pantalla, convertir archivos e incluso automatizar servicios que no tienen una API.
Puedes agregar código de cualquier complejidad, incluyendo scripts para convertir HTML a PDF. Una vez configurado el nodo, puedes vincularlo a muchas otras integraciones para mejorar su automatización: modelos de IA como ChatGPT, bases de datos como Airtable, sistemas CRM como Webflow y muchas otras integraciones.
¡Comience a utilizar Headless Browser ahora para acelerar, mejorar y simplificar su trabajo!
Para empezar a usar Puppeteer y crear archivos PDF, es necesario configurarlo correctamente y comprender sus opciones básicas de configuración. Aquí tienes una guía rápida para ayudarte a empezar.
Para generar un PDF básico a partir de una página web, cree un app.js archivo con el siguiente código:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.freecodecamp.org/', {
waitUntil: 'networkidle0'
});
await page.pdf({
path: 'example.pdf',
format: 'Letter'
});
await browser.close();
})();
Este script describe el flujo de trabajo esencial: iniciar un navegador, abrir una página, navegar a una URL, generar el PDF y cerrar el navegador.
Puppeteer te permite ajustar varias configuraciones para la creación de PDF. A continuación, se muestran algunas opciones clave que puedes modificar:
| Fijar | Descripción original | Valor de ejemplo |
|---|---|---|
| Formato | Tamaño de papel | 'Carta', 'A4', 'Oficio' |
| Ancho | Ancho de página personalizado | '8.5 pulgadas', '215.9 mm' |
| Estatura | Altura de página personalizada | '11 pulgadas', '279.4 mm' |
| Paisaje | Orientación de la página | verdadero / falso |
| Margen | Márgenes de página | { arriba: '1in', derecha: '1in', abajo: '1in', izquierda: '1in' } |
Al generar archivos PDF a partir de páginas web, utilice el waitUntil: 'networkidle0' Opción. Esto garantiza que toda la actividad de la red se complete antes de generar el PDF.
Para contenido HTML personalizado, puede crear archivos PDF con archivos locales. Esto es especialmente útil para documentos con plantillas o procesamiento por lotes. Actualice el page.goto() funciona así:
await page.goto(`file://${absolutePath}`, {
waitUntil: 'networkidle0'
});
Dado que Puppeteer utiliza el motor de renderizado de Chrome, cualquier estilo CSS o formato compatible con Chrome se mostrará correctamente en tus archivos PDF. Para necesidades más complejas, puedes explorar técnicas de formato avanzadas para crear informes PDF detallados.
Puppeteer ofrece numerosas opciones para personalizar tus PDF. Consulta las secciones a continuación para aprender a configurar encabezados, controlar el diseño de página y mantener la coherencia del diseño.
Puedes incluir encabezados y pies de página modificando las opciones del PDF con plantillas HTML. Aquí tienes un ejemplo:
await page.pdf({
displayHeaderFooter: true,
headerTemplate: `<div style="font-size: 10px; padding: 10px; width: 100%; text-align: center;">
<span class="title"></span> | Generated on <span class="date"></span>
</div>`,
footerTemplate: `<div style="font-size: 10px; padding: 10px; width: 100%; text-align: center;">
Page <span class="pageNumber"></span> of <span class="totalPages"></span>
</div>`,
margin: { top: '1.25in', bottom: '1in' }
});
Aquí están las clases dinámicas que puedes utilizar:
Para administrar los saltos de página y garantizar que el contenido fluya sin problemas, utilice reglas CSS como estas:
.no-break {
page-break-inside: avoid;
}
.force-break {
page-break-after: always;
}
También puede ajustar la configuración del papel directamente en las opciones de PDF:
| Fijar | Opciones | Ejemplo |
|---|---|---|
| Formato | Carta, A4, Legal | formato: 'Carta' |
| Dimensiones | Ancho/alto personalizado | Ancho: '8.5in', Alto: '11in' |
| Orientación | Retrato / paisaje | paisaje: verdadero |
| Márgenes | Espaciado personalizado | margen: { arriba: '1in', abajo: '1in' } |
Ajuste las fuentes y los elementos visuales para que se alineen con su marca:
@font-face {
font-family: 'CustomFont';
src: url('path/to/font.woff2') format('woff2');
}
await page.pdf({ printBackground: true });
body {
-webkit-print-color-adjust: exact;
background-color: #f5f5f5;
}
export FONTCONFIG_FILE=/path/to/fonts.conf
Estas opciones le permiten crear archivos PDF con un aspecto pulido y profesional.
La creación de informes PDF avanzados requiere una atención minuciosa a los detalles, especialmente en la visualización de datos, el diseño y el rendimiento. Al mejorar las técnicas básicas de formato, puede producir documentos de calidad profesional que destaquen.
Mejore sus informes con elementos visuales dinámicos combinando Titiritero, D3.js y ManillarA continuación, se muestra un ejemplo de configuración para integrar gráficos de datos:
const template = Handlebars.compile(`
<div class="report-container">
{{> dataTable}}
<div id="chart"></div>
</div>
`);
// D3.js chart configuration
const chartConfig = {
container: '#chart',
data: salesData,
width: 800,
height: 400
};
Para garantizar que su PDF tenga un aspecto impecable, configure los ajustes de salida de la siguiente manera:
await page.pdf({
printBackground: true,
format: 'Letter',
margin: {
top: '0.75in',
right: '0.5in',
bottom: '0.75in',
left: '0.5in'
}
});
D3.js es una biblioteca de JavaScript para manipular documentos basados en datos. D3 te ayuda a dar vida a tus datos usando HTML, SVG y CSS.
Una vez que tenga los elementos visuales listos, organice el informe con contenidos y números de página.
Siga estos pasos para agregar un Tabla de contenidos y garantizar una numeración de páginas precisa:
const mainPdf = await page.pdf({
format: 'Letter',
displayHeaderFooter: true
});
const pageMapping = await extractPageNumbers(mainPdf);
const tocHtml = generateTocHtml(pageMapping);
const finalPdf = await mergePdfs([tocPdf, mainPdf]);
Para documentos más grandes, necesitará tomar medidas adicionales para mantener el rendimiento.
Gestionar informes extensos de forma eficiente requiere optimizaciones específicas. A continuación, se presentan algunas técnicas eficaces:
| Tecnologia | Beneficio |
|---|---|
| Uso de archivos temporales | Reduce el uso de memoria en un 20% |
| Limitación del núcleo de la CPU | Acelera el procesamiento al equilibrar las tareas |
Por ejemplo, Carriyo's La implementación en abril de 2024 generó 10,000 95 archivos PDF diarios con una latencia del percentil 365 de XNUMX ms en AWS Lambda. Así es como se puede aplicar el manejo temporal de archivos:
// Optimize file handling
const tempFile = await saveTempHtml(content);
await page.goto(`file://${tempFile}`, {
waitUntil: 'networkidle0',
timeout: 30000
});
Al usar archivos temporales para eludir las limitaciones del protocolo, mejoramos tanto el rendimiento como la confiabilidad. - Danindu de Silva
Si encuentra problemas durante la navegación, asegúrese de registrar los errores y volver a cargar la página:
try {
await page.goto(url, {
waitUntil: 'networkidle0',
timeout: 30000
});
} catch (error) {
console.error('Navigation failed:', error);
await page.reload();
}
Estos métodos garantizan que la generación de informes a gran escala siga siendo confiable y eficiente.
Abordar los problemas comunes es fundamental para garantizar que sus flujos de trabajo automatizados de PDF funcionen de forma fluida y fiable. Las siguientes soluciones se basan en los conceptos básicos de configuración descritos anteriormente.
En el tercer trimestre de 3, el equipo de desarrollo de Acme Corp solucionó los errores de "Error al iniciar Chrome" en servidores Ubuntu instalando las dependencias necesarias. Esto redujo las tasas de error en un 2023 % y ahorró 95 horas semanales de depuración.
Para problemas de inicio de Chrome en Windows, utilice la siguiente configuración:
const browser = await puppeteer.launch({
ignoreDefaultArgs: ['--disable-extensions'],
args: ['--disable-features=HttpsFirstBalancedModeAutoEnable']
});
A continuación se explica cómo abordar errores comunes de manera eficiente:
| Tipo de error | Solución | Impacto |
|---|---|---|
| Módulo no encontrado | Actualizar Node.js a v14+ | Corrige conflictos de dependencia |
| Tiempo de espera de navegación | Establecer valores de tiempo de espera personalizados | Previene fallos prematuros del script |
| Problemas de la zona de pruebas | Ajustar permisos | Garantiza una ejecución segura |
Por ejemplo, para gestionar los tiempos de espera de navegación, puede utilizar esta lógica de reintento:
const navigateWithRetry = async (page, url) => {
try {
await page.goto(url, {
waitUntil: 'networkidle0',
timeout: 30000
});
} catch (error) {
console.error('Navigation error:', error);
await page.reload();
}
};
Una vez resueltos los errores, puedes centrar tu atención en mejorar la velocidad para lograr una mayor eficiencia en el flujo de trabajo.
Tras gestionar los errores, el siguiente paso es aumentar la velocidad de generación de PDF. Por ejemplo, Carriyo genera 10,000 95 PDF al día con una latencia p365 de XNUMX ms en AWS Lambda.
A continuación se muestra un fragmento de código para optimizar el rendimiento al servir activos estáticos localmente:
await page.setRequestInterception(true);
page.on('request', request => {
if (request.resourceType() === 'font' || request.resourceType() === 'image') {
request.respond({
body: localFileContent,
headers: { 'Cache-Control': 'public, max-age=31536000' }
});
}
});
Para operaciones a gran escala, considere estas estrategias:
Al usar archivos temporales para eludir las limitaciones del protocolo, mejoramos tanto el rendimiento como la confiabilidad. - Danindu de Silva
Latenode facilita el uso de Puppeteer para generar archivos PDF, ofreciendo una forma escalable y rentable de automatizar los flujos de trabajo de documentos.
Latenode combina las funciones PDF de Puppeteer con herramientas como un generador visual de flujos de trabajo, generación de código con IA y lógica condicional. También es compatible con una amplia gama de paquetes NPM. La plataforma utiliza un sistema de créditos basado en el tiempo, lo que ayuda a gestionar los costes de la automatización de PDF de forma eficiente.
Basándose en la funcionalidad principal de Puppeteer, Latenode simplifica los flujos de trabajo de PDF complejos con una interfaz fácil de usar diseñada para la escalabilidad.
Estas son las características destacadas para la automatización de PDF:
Para utilizar Puppeteer para la generación de PDF en Latenode, puede seguir esta configuración básica:
const puppeteer = require('puppeteer');
async function generatePDF(url) {
const browser = await puppeteer.launch({
headless: true,
args: ['--disable-dev-shm-usage']
});
const page = await browser.newPage();
await page.goto(url, { waitUntil: 'networkidle0' });
const pdf = await page.pdf({ format: 'A4' });
await browser.close();
return pdf;
}
Para mantener segura la generación de documentos, almacene información confidencial, como credenciales, en variables de entorno:
await page.type('#email', process.env.PDF_USER);
await page.type('#password', process.env.PDF_PASSWORD);
Esta configuración garantiza un flujo de trabajo seguro y eficiente para generar archivos PDF.
Al elegir una plataforma para la automatización de PDF, aquí se muestra cómo Latenode se compara con las herramientas tradicionales:
| Feature | Nodo tardío | Herramientas de automatización tradicionales |
|---|---|---|
| Modelo de precios | Créditos basados en el tiempo a partir de $5/mes | Licencias por documento o por usuario |
| Límites del flujo de trabajo | 20–ilimitado | A menudo limitado por ejecuciones concurrentes |
| Compatibilidad con paquetes NPM | Más de 1 millón de paquetes | Generalmente limitado a módulos específicos de la plataforma |
| Historial de ejecución | Retención de 1 a 60 días | A menudo limitado al registro básico |
Para uso empresarial, el plan Prime de Latenode (297 $/mes) admite hasta 1.5 millones de ejecuciones de escenarios y conserva el historial de ejecución durante 60 días. Esto lo convierte en una excelente opción para empresas con necesidades de generación de PDF de gran volumen.
La plataforma también simplifica tareas como modificar el estilo de página antes de crear un PDF. Por ejemplo, puedes ocultar elementos específicos con este fragmento:
await page.addStyleTag({
content: '.nav { display: none } .navbar { border: 0px } #print-button { display: none }'
});
Esta flexibilidad ayuda a agilizar incluso los flujos de trabajo de PDF más complejos.
Puppeteer es una potente herramienta para generar archivos PDF, tanto si trabaja con documentos sencillos como con informes complejos. Su compatibilidad con tecnologías web modernas y su control preciso sobre la salida de PDF lo convierten en una excelente opción para casos de uso a gran escala.
Por ejemplo, Carriyo En abril de 2024, se utilizó Puppeteer con éxito para generar 10,000 95 archivos PDF diarios de etiquetas de envío en AWS Lambda. Se logró una latencia p365 de 7.68 ms a un costo de $430,000 para XNUMX XNUMX invocaciones.
A continuación se presentan algunas características destacadas y sus beneficios prácticos:
| Feature | Beneficio | Impacto en el mundo real |
|---|---|---|
| Navegador sin cabeza | Permite la representación del lado del servidor con capacidades web modernas | Maneja contenido dinámico, JavaScript y CSS con precisión |
| Optimización de recursos | Almacena en caché activos y deshabilita funciones no utilizadas para mejorar el rendimiento | Mejora la eficiencia durante la generación de PDF |
| Gestión de errores | Incluye mecanismos de reintento y controles de tiempo de espera. | Garantiza la confiabilidad en entornos de producción. |
| Escalabilidad | Admite la generación de PDF de gran volumen | Rendimiento comprobado bajo cargas de trabajo pesadas |
Para aprovechar Puppeteer al máximo, tenga en cuenta estos pasos para una implementación exitosa:
userDataDir Configuración para almacenar en caché recursos y deshabilitar funciones no utilizadas para acelerar la generación de PDF.
Para una experiencia aún más fluida, puede integrar Puppeteer con plataformas como Latenode para simplificar los flujos de trabajo y mantener el máximo rendimiento.
