Como desenvolvedor da web, você pode querer gerar um arquivo PDF de uma página da web para compartilhar com seus clientes, usá-lo em apresentações ou adicioná-lo como um novo recurso em seu aplicativo da web. Não importa o motivo, Puppeteer, a API Node do Google para Chrome e Chromium headless torna a tarefa bastante simples para você.

Neste tutorial, veremos como converter páginas da web em PDF com Puppeteer e Node.js. Vamos começar o trabalho com uma rápida introdução ao que é o Puppeteer.

O que é Puppeteer, e por que é incrível?

Nas próprias palavras do Google, Titereiro é, “Uma biblioteca de Nó que fornece uma API de alto nível para controlar o Chrome ou Chromium headless por meio do Protocolo DevTools.”

[Ler:[Read:Conheça as 4 expansões usando dados para salvar o planeta]

O que é um navegador sem cabeça?

Se você não está familiarizado com o termo navegadores sem cabeça, é simplesmente um navegador sem GUI. Nesse sentido, um navegador sem cabeça é simplesmente outro navegador que entende como renderizar páginas da web HTML e processar JavaScript. Devido à falta de uma GUI, as interações com um navegador headless ocorrem por meio de uma linha de comando.

Mesmo que o Puppeteer seja principalmente um navegador sem cabeça, você pode configurá-lo e usá-lo como um Chrome ou Chromium sem cabeça.

O que você pode fazer com o Puppeteer?

Os poderosos recursos do navegador do Puppeteer o tornam um candidato perfeito para testes de aplicativos e web scraping.

Para citar alguns casos de uso em que o Puppeteer fornece as funcionalidades perfeitas para desenvolvedores da web,

  • Gere PDFs e capturas de tela de páginas da web
  • Automatizar o envio do formulário
  • Raspar páginas da web
  • Execute testes de IU automatizados enquanto mantém o ambiente de teste atualizado.
  • Gerar conteúdo pré-renderizado para aplicativos de página única (SPAs)

Configure o ambiente do projeto

Você pode usar o Puppeteer no backend e frontend para gerar PDFs. Neste tutorial, estamos usando um back-end do Node para a tarefa.

Inicialize o NPM e configure o servidor Express normal para começar com o tutorial.

Certifique-se de instalar o pacote Puppeteer NPM com o seguinte comando antes de começar.

Converter páginas da web em PDF

Agora chegamos à parte emocionante do tutorial. Com o Puppeteer, precisamos apenas de algumas linhas de código para converter páginas da web em PDF.

Primeiro, crie uma instância do navegador usando o Puppeteer launch função.

Em seguida, criamos uma nova instância de página e visitamos o URL da página fornecida usando o Puppeteer.

Nós definimos o waitUntil opção para networkidle0. Quando usamos networkidle0 opção, o Puppeteer espera até que não haja novas conexões de rede nos últimos 500 ms. É uma forma de determinar se o carregamento do site foi concluído. Não é exato e o Puppeteer oferece outras opções, mas é uma das mais confiáveis ​​para a maioria dos casos.

Por fim, criamos o PDF a partir do conteúdo da página rastreada e o salvamos em nosso dispositivo.

A impressão para Função PDF é bastante complicado e permite muita personalização, o que é fantástico. Aqui estão algumas das opções que usamos:

  • printBackground: Quando esta opção é definida como verdadeira, o Puppeteer imprime no PDF todas as cores de fundo ou imagens que você usou na página da web.
  • caminho: Caminho especifica onde salvar o arquivo PDF gerado. Você também pode armazená-lo em um fluxo de memória para evitar a gravação no disco.
  • formato: Você pode definir o formato PDF para uma das opções fornecidas: Carta, A4, A3, A2, etc.
  • margem: Você pode especificar uma margem para o PDF gerado com esta opção.

Quando a criação do PDF terminar, feche a conexão do navegador com browser.close().

Crie uma API para gerar e responder PDFs a partir de URLs

Com o conhecimento que adquirimos até agora, podemos agora criar um novo endpoint que receberá uma URL como uma string de consulta e, em seguida, enviará de volta ao cliente o PDF gerado.

Aqui está o código:

Se você iniciar o servidor e visitar o /pdf rota, com um target parâmetro de consulta contendo o URL que queremos converter. O servidor servirá o PDF gerado diretamente, sem nunca armazená-lo no disco.

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

O que irá gerar o seguinte PDF como parece na imagem: