Guía completa para generar PDF con Puppeteer: desde documentos sencillos hasta informes complejos

Puppeteer es una biblioteca de Node.js que automatiza los navegadores Chrome o Chromium, lo que la convierte en una herramienta potente para crear PDF. Tanto si está creando documentos sencillos como informes complejos, Puppeteer ofrece funciones como compatibilidad nativa con PDF, diseños personalizados e integración de automatizaciones para agilizar el proceso.

Funciones clave de Puppeteer para la generación de PDF:

• Configuración sencilla: Use navegador headless basado en Puppeteer y empiece a generar PDF con unas pocas líneas de código.
• Diseños personalizables: Ajuste el tamaño de página, la orientación, los márgenes y más.
• Contenido dinámico: Renderice páginas con mucho JavaScript, aplique estilos personalizados e incluya encabezados, pies de página y números de página.
• Rendimiento: Más rápido que alternativas como Selenium para la creación de PDF.
• Escalabilidad: Gestiona la generación de PDF a gran escala, incluso para miles de documentos al día.

Por qué es útil:

Puppeteer es perfecto para automatizar flujos, generar informes o exportar contenido web. Desde empresas que crean documentos con su marca hasta desarrolladores que trabajan con visualizaciones de datos, Puppeteer simplifica el proceso y garantiza resultados de alta calidad.

Si está listo para profundizar, el artículo le guía por la configuración, la personalización y funciones avanzadas, como la gestión de informes grandes y la resolución de problemas habituales.

sbb-itb-23997f1

Empiece a usar el navegador headless en Latenode para convertir archivos, automatizar la monitorización web y mucho más.

Latenode cuenta con una integración directa con un navegador headless basado en Puppeteer, que le permite integrar esta biblioteca en sus flujos de automatización para extraer datos de sitios web, tomar capturas de pantalla, convertir archivos e incluso automatizar servicios que no tienen una API.

Puede añadir código de cualquier complejidad, incluidos scripts para convertir HTML a PDF. Una vez configurado el nodo, puede conectarlo con 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.

Empiece a usar el navegador headless ahora para acelerar, mejorar y simplificar su trabajo.

Configuración básica de PDF con Puppeteer

Para empezar a crear PDF con Puppeteer, debe configurarlo correctamente y comprender sus opciones básicas de configuración. Aquí tiene una guía rápida para comenzar.

Creación de su primer PDF

Para generar un PDF básico a partir de una página web, cree un archivo app.js 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 esencial: iniciar un navegador, abrir una página, navegar a una URL, generar el PDF y cerrar el navegador.

Configuración y diseño de página

Puppeteer le permite ajustar diversas configuraciones para crear PDF. A continuación, se muestran algunas opciones clave que puede modificar:

Al generar PDF a partir de páginas web, use la opción waitUntil: 'networkidle0'. Esto garantiza que toda la actividad de red haya finalizado antes de generar el PDF [3].

Para contenido HTML personalizado, puede crear PDF mediante archivos locales. Esto resulta especialmente útil para documentos basados en plantillas o el procesamiento por lotes. Actualice la función page.goto() de esta forma:

await page.goto(`file://${absolutePath}`, {
    waitUntil: 'networkidle0'
});

Como Puppeteer se basa en el motor de renderizado de Chrome, cualquier estilo CSS o formato compatible con Chrome aparecerá correctamente en sus PDF. Para necesidades más complejas, puede explorar técnicas avanzadas de formato para crear informes PDF detallados.

Opciones de formato de PDF

Puppeteer ofrece muchas opciones para personalizar sus PDF. Consulte las secciones siguientes para aprender a configurar encabezados, controlar el diseño de página y mantener la coherencia de su diseño.

Encabezados y pies de página

Puede incluir encabezados y pies de página modificando las opciones de PDF con plantillas HTML. Aquí tiene 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' }
});

Estas son las clases dinámicas que puede utilizar:

• date: Añade la marca de tiempo actual.
• title: Muestra el título del documento.
• url: Muestra la URL de la página.
• pageNumber: Inserta el número de página actual.
• totalPages: Indica el número total de páginas.

Saltos de página y control del diseño

Para gestionar los saltos de página y garantizar que el contenido fluya correctamente, use 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:

Fuentes y elementos visuales

Ajuste las fuentes y los elementos visuales para alinearlos con su marca:

• Fuentes web personalizadas:

@font-face {
    font-family: 'CustomFont';
    src: url('path/to/font.woff2') format('woff2');
}

• Active los colores e imágenes de fondo:

await page.pdf({ printBackground: true });

body {
    -webkit-print-color-adjust: exact;
    background-color: #f5f5f5;
}

• Configuración de fuentes para entornos Linux o AWS Lambda:

export FONTCONFIG_FILE=/path/to/fonts.conf

Estas opciones le permiten crear PDF con un aspecto cuidado y profesional.

Creación de informes PDF complejos

La creación de informes PDF avanzados requiere una atención meticulosa a los detalles, especialmente en lo que respecta a 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.

Tablas y gráficos de datos

Mejore sus informes con elementos visuales dinámicos combinando Puppeteer, D3.js y Handlebars. A continuación, se muestra una configuración de ejemplo 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 acabado profesional, 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 le ayuda a dar vida a los datos mediante HTML, SVG y CSS." [5]

Una vez que sus elementos visuales estén listos, organice el informe con un índice y números de página.

Índice y números de página

Siga estos pasos para añadir un índice y garantizar una numeración de páginas precisa:

1. Generar el PDF inicial Cree la primera versión del PDF con encabezados y pies de página:

   const mainPdf = await page.pdf({
     format: 'Letter',
     displayHeaderFooter: true
   });
   

2. Analizar y extraer números de página Extraiga los números de página y genere el índice de forma dinámica:

   const pageMapping = await extractPageNumbers(mainPdf);
   const tocHtml = generateTocHtml(pageMapping);
   

3. Combinar el documento final Combine el índice con el documento principal:

   const finalPdf = await mergePdfs([tocPdf, mainPdf]);
   

Para documentos más grandes, deberá seguir pasos adicionales para mantener el rendimiento.

Gestión de informes grandes

Gestionar informes extensos de forma eficiente requiere optimizaciones específicas. Estas son algunas técnicas eficaces:

Por ejemplo, la implementación de Carriyo en abril de 2024 generó 10.000 PDF al día con una latencia de percentil 95 de 365 ms en AWS Lambda [7]. Así puede aplicarse la gestión de archivos temporales:

// Optimize file handling
const tempFile = await saveTempHtml(content);
await page.goto(`file://${tempFile}`, {
  waitUntil: 'networkidle0',
  timeout: 30000
});

"Al usar archivos temporales para evitar las limitaciones del protocolo, mejoramos tanto el rendimiento como la fiabilidad." - Danindu de Silva [6]

Si encuentra problemas durante la navegación, asegúrese de registrar los errores y recargar 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 fiable y eficiente.

Problemas habituales y soluciones

Abordar los problemas habituales es clave para garantizar que sus flujos automatizados de PDF funcionen de forma fluida y fiable. Las siguientes soluciones se basan en los fundamentos de configuración explicados anteriormente.

Compatibilidad del navegador

En el tercer trimestre de 2023, el equipo de desarrollo de Acme Corp resolvió errores de "Failed to launch chrome" en servidores Ubuntu instalando las dependencias necesarias. Esto redujo las tasas de error en un 95 % y ahorró 10 horas semanales de tiempo de depuración [8].

Para problemas de inicio de Chrome en Windows, use la siguiente configuración:

const browser = await puppeteer.launch({
    ignoreDefaultArgs: ['--disable-extensions'],
    args: ['--disable-features=HttpsFirstBalancedModeAutoEnable']
});

Guía de resolución de errores

Así puede abordar los errores habituales de forma eficiente:

Por ejemplo, para gestionar los tiempos de espera de navegación, puede usar 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, puede centrarse en mejorar la velocidad para aumentar la eficiencia del flujo.

Optimización de velocidad

Después de gestionar los errores, el siguiente paso es aumentar la velocidad de generación de PDF. Por ejemplo, Carriyo genera 10.000 PDF al día con una latencia p95 de 365 ms en AWS Lambda [7].

Aquí tiene un fragmento de código para optimizar el rendimiento sirviendo recursos estáticos de forma local:

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:

• Gestión de recursos: Mantenga activas las instancias del navegador en plataformas serverless para evitar los arranques en frío que aumentan la latencia [7].
• Configuración del sistema: En un sistema de 4 núcleos, limite la generación simultánea de PDF a tres procesos para una mayor estabilidad [7].
• Optimización de red: Use las API de interceptación de red de Puppeteer para servir recursos estáticos localmente [7].

"Al usar archivos temporales para evitar las limitaciones del protocolo, mejoramos tanto el rendimiento como la fiabilidad." - Danindu de Silva [6]

Uso de Puppeteer con Latenode

Latenode facilita el uso de Puppeteer para generar PDF y ofrece una forma escalable y rentable de automatizar flujos de documentos.

Cómo funciona Latenode

Latenode combina las capacidades de PDF de Puppeteer con herramientas como un creador visual de flujos, generación de código impulsada por IA y lógica condicional. También admite una amplia variedad de paquetes NPM. La plataforma utiliza un sistema de créditos basado en el tiempo, lo que ayuda a gestionar eficazmente los costes de la automatización de PDF.

Partiendo de la funcionalidad principal de Puppeteer, Latenode simplifica los flujos de PDF complejos con una interfaz fácil de usar diseñada para ofrecer escalabilidad.

Estas son las funciones más destacadas para la automatización de PDF:

• Automatización integrada de navegadores headless
• Generación de código personalizado asistida por IA
• Un creador visual de flujos para configurar la lógica de PDF
• Compatibilidad con ramificación condicional en flujos

Configuración de Puppeteer en Latenode

Para utilizar Puppeteer para generar 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 las 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 seguro y eficiente para generar PDF.

Comparación de plataformas de automatización

Al elegir una plataforma para la automatización de PDF, así se compara Latenode con las herramientas tradicionales:

Para uso empresarial, el plan Prime de Latenode ($297/mes) admite hasta 1,5 millones de ejecuciones de flujos y conserva el historial de ejecuciones durante 60 días. Esto lo convierte en una opción sólida para empresas con necesidades de generación de PDF de gran volumen.

La plataforma también simplifica tareas como modificar el estilo de una página antes de crear un PDF. Por ejemplo, puede 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 PDF más complejos.

Conclusión

Repaso de los puntos principales

Puppeteer es una herramienta potente para generar PDF, tanto si trabaja con documentos simples como con informes complejos. Su capacidad para gestionar tecnologías web modernas y proporcionar un control preciso sobre la salida de PDF la convierte en una opción sólida para casos de uso a gran escala.

Por ejemplo, Carriyo utilizó con éxito Puppeteer en abril de 2024 para generar 10.000 PDF diarios de etiquetas de envío en AWS Lambda. Alcanzaron una latencia p95 de 365 ms con un coste de $7.68 por 430.000 invocaciones [7].

Estas son algunas funciones destacadas y sus beneficios prácticos:

Consejos para comenzar

Para aprovechar al máximo Puppeteer, considere estos pasos para una implementación exitosa:

• Optimización del rendimiento: Use la configuración userDataDir para almacenar recursos en caché y desactive funciones no utilizadas para acelerar la generación de PDF [4].
• Gestión de recursos: Genere PDF en el servidor para reducir la carga en los dispositivos cliente, especialmente en tareas de gran volumen [1].
• Gestión de errores: Implemente estrategias sólidas de gestión de errores con tiempos de espera y mecanismos de reintento para mantener estables los entornos de producción [7].

Para una experiencia aún más fluida, puede integrar Puppeteer con plataformas como Latenode para simplificar los flujos sin renunciar al máximo rendimiento.