Cómo convertir páginas web en archivos PDF con Puppeteer y NodeJS


Como desarrollador web, es posible que haya deseado generar un archivo PDF de una página web para compartir con sus clientes, usarlo en presentaciones o agregarlo como una nueva característica en su aplicación web. No importa cuál sea el motivo, Puppeteer, la API de nodo de Google para Chrome y Chromium sin cabeza, simplifica la tarea.

En este tutorial, veremos cómo convertir páginas web a PDF con Puppeteer y Node.js. Comencemos el trabajo con una rápida introducción a lo que es Puppeteer.

¿Qué es Titiritero y por qué es asombroso?

En las propias palabras de Google, Titiritero es, «Una biblioteca de nodo que proporciona una API de alto nivel para controlar Chrome o Chromium sin cabeza a través del protocolo DevTools».

[Leer:[Read:Conozca las 4 ampliaciones que utilizan datos para salvar el planeta]

¿Qué es un navegador sin cabeza?

Si no está familiarizado con el término navegadores sin cabeza, es simplemente un navegador sin GUI. En ese sentido, un navegador sin cabeza es simplemente otro navegador que entiende cómo renderizar páginas web HTML y procesar JavaScript. Debido a la falta de una GUI, las interacciones con un navegador sin cabeza tienen lugar a través de una línea de comandos.

Aunque Puppeteer es principalmente un navegador sin cabeza, puedes configurarlo y usarlo como Chrome o Chromium sin cabeza.

¿Qué puedes hacer con Puppeteer?

Las potentes capacidades de navegador de Puppeteer lo convierten en un candidato perfecto para pruebas de aplicaciones web y web scraping.

Para nombrar algunos casos de uso en los que Puppeteer proporciona las funcionalidades perfectas para desarrolladores web,

  • Genere archivos PDF y capturas de pantalla de páginas web
  • Automatizar el envío de formularios
  • Raspar páginas web
  • Realice pruebas de IU automatizadas mientras mantiene el entorno de prueba actualizado.
  • Generación de contenido renderizado previamente para aplicaciones de una sola página (SPA)

Configurar el entorno del proyecto

Puede utilizar Puppeteer en el backend y el frontend para generar archivos PDF. En este tutorial, usamos un backend de Node para la tarea.

Inicialice NPM y configure el servidor Express habitual para comenzar con el tutorial.

Asegúrese de instalar el paquete Puppeteer NPM con el siguiente comando antes de comenzar.

Convertir páginas web a PDF

Ahora llegamos a la parte emocionante del tutorial. Con Puppeteer, solo necesitamos unas pocas líneas de código para convertir páginas web en PDF.

Primero, cree una instancia de navegador usando Puppeteer’s launch función.

Luego, creamos una nueva instancia de página y visitamos la URL de la página dada usando Puppeteer.

Hemos establecido el waitUntil opción a networkidle0. Cuando usamos networkidle0 opción, Puppeteer espera hasta que no haya nuevas conexiones de red en los últimos 500 ms. Es una forma de determinar si el sitio ha terminado de cargarse. No es exacta y Puppeteer ofrece otras opciones, pero es una de las más confiables en la mayoría de los casos.

Finalmente, creamos el PDF a partir del contenido de la página rastreada y lo guardamos en nuestro dispositivo.

La impresión a Función PDF es bastante complicado y permite mucha personalización, lo cual es fantástico. Estas son algunas de las opciones que usamos:

  • printBackground: Cuando esta opción se establece en verdadero, Puppeteer imprime cualquier color de fondo o imágenes que haya utilizado en la página web en el PDF.
  • camino: Ruta especifica dónde guardar el archivo PDF generado. También puede almacenarlo en una secuencia de memoria para evitar escribir en el disco.
  • formato: Puede configurar el formato PDF en una de las opciones dadas: Carta, A4, A3, A2, etc.
  • margen: Puede especificar un margen para el PDF generado con esta opción.

Cuando termine la creación del PDF, cierre la conexión del navegador con browser.close().

Cree una API para generar y responder archivos PDF a partir de URL

Con el conocimiento que reunimos hasta ahora, ahora podemos crear un nuevo punto final que recibirá una URL como una cadena de consulta y luego transmitirá al cliente el PDF generado.

Aquí está el código:

Si inicia el servidor y visita el /pdf ruta, con un target parámetro de consulta que contiene la URL que queremos convertir. El servidor servirá el PDF generado directamente sin almacenarlo en el disco.

Ejemplo de URL: http://localhost:3000/pdf?target=https://google.com

Lo que generará el siguiente PDF tal como se ve en la imagen:

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para fines de afiliación y para mostrarte publicidad relacionada con tus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver Política de cookies
Privacidad