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

Tabla de contenidos.

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

Características principales de Puppeteer para la generación de PDF:

Titiritero

Configuración Fácil: Utiliza Navegador sin interfaz gráfica basado en Puppeteer y empezar a generar archivos PDF con unas pocas líneas de código.
Diseños personalizables:Ajuste el tamaño de la 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:Maneja la generación de PDF a gran escala, incluso de miles de documentos diariamente.

Por qué es útil:

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.

¡Comience a usar Headless Browser en Latenode para convertir archivos, automatizar el monitoreo web y más!

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!

Configuración básica de PDF con Puppeteer

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.

Creando tu primer PDF

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.

Configuración y diseño de página

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	Valor de ejemplo
Formato	Tamaño de papel	'Carta', 'A4', 'Oficio'
Ancho	Ancho de página personalizado	'8.5 pulgadas', '215.9 mm'
ALTO	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. ^{[ 3 ]}.

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.

Opciones de formato PDF

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.

Encabezados y pies de página

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:

datos:Agrega la marca de tiempo actual.
título:Muestra el título del documento.
url:Muestra la URL de la página.
número de página: Inserta el número de página actual.
Páginas totales:Indica el número total de páginas.

Saltos de página y control de diseño

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

Fuentes y elementos visuales

Ajuste las fuentes y los elementos visuales para que se alineen con su marca:

Fuentes web personalizadas:

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

Habilitar 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 Linux o AWS Lambda ambientes:

export FONTCONFIG_FILE=/path/to/fonts.conf

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

Informes PDF del complejo de edificios

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.

Tablas y gráficos de datos

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. ^{[ 5 ]}

Una vez que tenga los elementos visuales listos, organice el informe con contenidos y números de página.

Contenido y números de página

Siga estos pasos para agregar un Tabla de contenidos y garantizar una numeración de páginas precisa:

Generar PDF inicial Crea la primera versión del PDF con encabezados y pies de página:

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

Analizar y extraer números de página Extraer números de página y generar la tabla de contenidos dinámicamente:
```
const pageMapping = await extractPageNumbers(mainPdf);
const tocHtml = generateTocHtml(pageMapping);
```
Fusionar documento final Combine la tabla de contenidos con el documento principal:
```
const finalPdf = await mergePdfs([tocPdf, mainPdf]);
```

Para documentos más grandes, necesitará tomar medidas adicionales para mantener el rendimiento.

Manejo de informes grandes

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. ^{[ 7 ]}Así es como se puede aplicar el manejo 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 eludir las limitaciones del protocolo, mejoramos tanto el rendimiento como la confiabilidad. - Danindu de Silva ^{[ 6 ]}

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.

Problemas comunes y soluciones

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.

Compatibilidad del navegador

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 en tiempo de depuración. ^{[ 8 ]}.

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

Guía de resolución de errores

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.

Optimización de velocidad

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. ^{[ 7 ]}.

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:

Gestión de Recursos:Mantenga las instancias del navegador activas en plataformas sin servidor para evitar inicios 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 mejor estabilidad ^{[ 7 ]}.
Optimización de la red: Utilice las API de interceptación de red de Puppeteer para servir activos estáticos localmente ^{[ 7 ]}.

Al usar archivos temporales para eludir las limitaciones del protocolo, mejoramos tanto el rendimiento como la confiabilidad. - Danindu de Silva ^{[ 6 ]}

Usando Puppeteer con Nodo tardío

Nodo tardío

Latenode facilita el uso de Puppeteer para generar archivos PDF, ofreciendo una forma escalable y rentable de automatizar los flujos de trabajo de documentos.

Cómo funciona Latenode

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:

Automatización integrada del navegador sin cabeza
Generación de código personalizado asistida por IA
Un generador de flujo de trabajo visual para configurar la lógica de PDF
Compatibilidad con ramificaciones condicionales en flujos de trabajo

Configuración de Puppeteer en Latenode

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.

Comparación de plataformas de automatización

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.

Conclusión

Revisión de puntos principales

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, Puppeteer generó con éxito 10,000 95 archivos PDF diarios para etiquetas de envío en AWS Lambda. Logró una latencia p365 de 7.68 ms a un costo de $430,000 para XNUMX XNUMX invocaciones. ^{[ 7 ]}.

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

Consejos para empezar

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

Optimización de performance: Utilizar el userDataDir Configuración para almacenar en caché recursos y deshabilitar funciones no utilizadas para acelerar la generación de PDF ^{[ 4 ]}.
Gestión de Recursos:Genere archivos PDF en el lado del servidor para reducir la carga en los dispositivos cliente, especialmente para tareas de gran volumen ^{[ 1 ]}.
Gestión de errores :Implementar estrategias robustas de manejo 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 de trabajo y mantener el máximo rendimiento.