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:]
¿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:
¡Eso es! Ha completado la conversión de una página web a PDF. ¿No fue tan fácil?
Como se mencionó anteriormente, Puppeteer ofrece muchas opciones de personalización, así que asegúrese de jugar con las oportunidades para obtener resultados diferentes.
A continuación, podemos cambiar el tamaño de la ventana gráfica para capturar sitios web con diferentes resoluciones.
Capture sitios web con diferentes ventanas gráficas
En el PDF creado anteriormente, no especificamos el tamaño de la ventana gráfica para la página web que está visitando Titiritero, sino que usamos el tamaño de la ventana gráfica predeterminada, 800 × 600 px.
Sin embargo, podemos establecer con precisión el tamaño de la ventana gráfica de la página antes de rastrearla.
Conclusión
En el tutorial de hoy, usamos Puppeteer, una API de nodo para Chrome sin cabeza, para generar un PDF de una página web determinada. Dado que ahora está familiarizado con los conceptos básicos de Puppeteer, puede utilizar este conocimiento en el futuro para crear archivos PDF o incluso para otros fines, como raspado web y pruebas de interfaz de usuario.
Esta artículo fue publicado originalmente el Transmisión de código en vivo por Juan Cruz Martínez (gorjeo: @bajcmartinez), fundador y editor de Live Code Stream, emprendedor, desarrollador, autor, orador y hacedor de cosas.
Transmisión de código en vivo también está disponible como un boletín semanal gratuito. Regístrese para recibir actualizaciones sobre todo lo relacionado con la programación, la inteligencia artificial y la informática en general.