Guia Completo de Geração de PDFs com Puppeteer: De Documentos Simples a Relatórios Complexos

Puppeteer é uma biblioteca Node.js que automatiza navegadores Chrome ou Chromium, tornando-se uma ferramenta poderosa para criar PDFs. Seja para criar documentos simples ou relatórios complexos, Puppeteer oferece recursos como suporte nativo a PDF, layouts personalizados e integração com automação para simplificar o processo.

Principais recursos do Puppeteer para geração de PDFs:

• Configuração simples: Use o navegador headless baseado em Puppeteer e comece a gerar PDFs com poucas linhas de código.
• Layouts personalizáveis: Ajuste o tamanho da página, a orientação, as margens e muito mais.
• Conteúdo dinâmico: Renderize páginas com muito JavaScript, aplique estilos personalizados e inclua cabeçalhos, rodapés e números de página.
• Desempenho: Mais rápido do que alternativas como Selenium para a criação de PDFs.
• Escalabilidade: Processa a geração de PDFs em larga escala, inclusive milhares de documentos por dia.

Por que é útil:

Puppeteer é ideal para automatizar fluxos, gerar relatórios ou exportar conteúdo da web. De empresas que criam documentos com a identidade da marca a desenvolvedores que trabalham com visualizações de dados, Puppeteer simplifica o processo e garante resultados de alta qualidade.

Se você está pronto para começar, este artigo orienta você pela configuração, personalização e recursos avançados, como o processamento de relatórios extensos e a solução de problemas comuns.

sbb-itb-23997f1

Comece a usar o navegador headless na Latenode para converter arquivos, automatizar o monitoramento da web e muito mais!

A Latenode tem uma integração direta com um navegador headless baseado em Puppeteer, que permite integrar essa biblioteca aos seus fluxos de automação para extrair dados de sites, tirar capturas de tela, converter arquivos e até automatizar serviços que não têm uma API.

Você pode adicionar código de qualquer complexidade, incluindo scripts para converter HTML em PDF. Depois que o nó estiver configurado, você poderá conectá-lo a muitas outras integrações para aprimorar sua automação: modelos de IA como ChatGPT, bancos de dados como Airtable, sistemas de CRM como Webflow e muitas outras integrações.

Comece a usar o navegador headless agora para acelerar, aprimorar e simplificar seu trabalho!

Configuração básica de PDF com Puppeteer

Começar a usar Puppeteer para criar PDFs envolve configurá-lo corretamente e entender suas opções básicas de configuração. Veja um guia rápido para ajudar você a dar os primeiros passos.

Criando seu primeiro PDF

Para gerar um PDF básico a partir de uma página da web, crie um arquivo app.js com o código a seguir:

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();
})();

Esse script apresenta o fluxo essencial: iniciar um navegador, abrir uma página, acessar uma URL, gerar o PDF e fechar o navegador.

Configurações de página e layout

Puppeteer permite ajustar várias configurações para a criação de PDFs. Veja abaixo algumas opções importantes que você pode modificar:

Ao gerar PDFs a partir de páginas da web, use a opção waitUntil: 'networkidle0'. Isso garante que toda a atividade de rede seja concluída antes da geração do PDF [3].

Para conteúdo HTML personalizado, você pode criar PDFs usando arquivos locais. Isso é especialmente útil para documentos baseados em modelos ou processamento em lote. Atualize a função page.goto() desta forma:

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

Como Puppeteer usa o mecanismo de renderização do Chrome, todos os estilos CSS ou formatações compatíveis com o Chrome aparecerão corretamente nos seus PDFs. Para necessidades mais complexas, você pode explorar técnicas avançadas de formatação para criar relatórios detalhados em PDF.

Opções de formatação de PDF

Puppeteer oferece muitas opções para personalizar seus PDFs. Confira as seções abaixo para aprender a configurar cabeçalhos, controlar o layout da página e manter a consistência do design.

Cabeçalhos e rodapés

Você pode incluir cabeçalhos e rodapés modificando as opções de PDF com modelos HTML. Veja um exemplo:

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 são as classes dinâmicas que você pode usar:

• date: Adiciona o registro de data e hora atual.
• title: Exibe o título do documento.
• url: Mostra a URL da página.
• pageNumber: Insere o número da página atual.
• totalPages: Indica o número total de páginas.

Quebras de página e controle de layout

Para gerenciar quebras de página e garantir que o conteúdo flua corretamente, use regras CSS como estas:

.no-break {
    page-break-inside: avoid;
}

.force-break {
    page-break-after: always;
}

Você também pode ajustar as configurações de papel diretamente nas opções de PDF:

Fontes e elementos visuais

Ajuste fontes e elementos visuais para alinhá-los à sua marca:

• Fontes web personalizadas:

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

• Ative cores e imagens de fundo:

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

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

• Configuração de fontes para ambientes Linux ou AWS Lambda:

export FONTCONFIG_FILE=/path/to/fonts.conf

Essas opções permitem criar PDFs com aparência refinada e profissional.

Criando relatórios complexos em PDF

Criar relatórios avançados em PDF exige atenção aos detalhes, especialmente em relação à visualização de dados, ao design do layout e ao desempenho. Ao aprimorar técnicas básicas de formatação, você pode produzir documentos de qualidade profissional que se destacam.

Tabelas e gráficos de dados

Aprimore seus relatórios com elementos visuais dinâmicos combinando Puppeteer, D3.js e Handlebars. Veja uma configuração de exemplo para integrar gráficos de dados:

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 garantir que seu PDF tenha uma aparência profissional, configure as opções de saída da seguinte forma:

await page.pdf({
  printBackground: true,
  format: 'Letter',
  margin: {
    top: '0.75in',
    right: '0.5in',
    bottom: '0.75in',
    left: '0.5in'
  }
});

"D3.js é uma biblioteca JavaScript para manipular documentos com base em dados. D3 ajuda você a dar vida aos dados usando HTML, SVG e CSS." [5]

Depois que seus elementos visuais estiverem prontos, organize o relatório com sumário e números de página.

Sumário e números de página

Siga estas etapas para adicionar um sumário e garantir uma numeração de páginas precisa:

1. Gerar o PDF inicial Crie a primeira versão do PDF com cabeçalhos e rodapés:

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

2. Analisar e extrair números de página Extraia os números de página e gere o sumário dinamicamente:

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

3. Mesclar o documento final Combine o sumário com o documento principal:

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

Para documentos maiores, será necessário adotar etapas adicionais para manter o desempenho.

Processamento de relatórios extensos

Processar relatórios extensos com eficiência exige otimizações específicas. Veja algumas técnicas eficazes:

Por exemplo, a implementação da Carriyo em abril de 2024 gerou 10.000 PDFs por dia com uma latência no percentil 95 de 365 ms no AWS Lambda [7]. Veja como aplicar o processamento de arquivos temporários:

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

"Ao usar arquivos temporários para contornar limitações de protocolo, melhoramos tanto o desempenho quanto a confiabilidade." - Danindu de Silva [6]

Se você encontrar problemas durante a navegação, registre os erros e recarregue a página:

try {
  await page.goto(url, {
    waitUntil: 'networkidle0',
    timeout: 30000
  });
} catch (error) {
  console.error('Navigation failed:', error);
  await page.reload();
}

Esses métodos garantem que a geração de relatórios em larga escala permaneça confiável e eficiente.

Problemas comuns e soluções

Resolver problemas comuns é essencial para garantir que seus fluxos automatizados de PDF funcionem de forma estável e confiável. As soluções a seguir se baseiam nos fundamentos de configuração discutidos anteriormente.

Compatibilidade de navegadores

No terceiro trimestre de 2023, a equipe de desenvolvimento da Acme Corp solucionou erros de "Failed to launch chrome" em servidores Ubuntu ao instalar as dependências necessárias. Isso reduziu as taxas de erro em 95% e economizou 10 horas por semana em tempo de depuração [8].

Para problemas ao iniciar o Chrome no Windows, use a seguinte configuração:

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

Guia para resolução de erros

Veja como resolver erros comuns com eficiência:

Por exemplo, para lidar com tempos limite de navegação, você pode usar esta lógica de nova tentativa:

const navigateWithRetry = async (page, url) => {
    try {
        await page.goto(url, {
            waitUntil: 'networkidle0',
            timeout: 30000
        });
    } catch (error) {
        console.error('Navigation error:', error);
        await page.reload();
    }
};

Depois de resolver os erros, você pode se concentrar em melhorar a velocidade para tornar o fluxo mais eficiente.

Otimização de velocidade

Depois de lidar com erros, a próxima etapa é aumentar a velocidade de geração de PDFs. Por exemplo, a Carriyo gera 10.000 PDFs diariamente com uma latência p95 de 365 ms no AWS Lambda [7].

Veja um trecho de código para otimizar o desempenho ao disponibilizar recursos 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 operações em larga escala, considere estas estratégias:

• Gerenciamento de recursos: Mantenha instâncias do navegador ativas em plataformas serverless para evitar inicializações a frio que aumentam a latência [7].
• Configuração do sistema: Em um sistema com 4 núcleos, limite a geração simultânea de PDFs a três processos para obter maior estabilidade [7].
• Otimização de rede: Use as APIs de interceptação de rede do Puppeteer para disponibilizar recursos estáticos localmente [7].

"Ao usar arquivos temporários para contornar limitações de protocolo, melhoramos tanto o desempenho quanto a confiabilidade." - Danindu de Silva [6]

Usando Puppeteer com a Latenode

A Latenode facilita o uso do Puppeteer para gerar PDFs, oferecendo uma forma escalável e econômica de automatizar fluxos de documentos.

Como a Latenode funciona

A Latenode combina os recursos de PDF do Puppeteer com ferramentas como um criador visual de fluxos, geração de código com IA e lógica condicional. Ela também oferece suporte a uma ampla variedade de pacotes NPM. A plataforma usa um sistema de créditos baseado em tempo, que ajuda a gerenciar com eficiência os custos da automação de PDFs.

Com base na funcionalidade principal do Puppeteer, a Latenode simplifica fluxos complexos de PDFs com uma interface fácil de usar e criada para escalar.

Estes são os principais recursos para automação de PDFs:

• Automação integrada de navegador headless
• Geração de código personalizado assistida por IA
• Criador visual de fluxos para configurar a lógica de PDF
• Suporte a ramificações condicionais em fluxos

Configurando Puppeteer na Latenode

Para usar Puppeteer na geração de PDFs na Latenode, você pode seguir esta configuração 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 manter a geração de documentos segura, armazene informações sensíveis, como credenciais, em variáveis de ambiente:

await page.type('#email', process.env.PDF_USER);
await page.type('#password', process.env.PDF_PASSWORD);

Essa configuração garante um fluxo seguro e eficiente para gerar PDFs.

Comparando plataformas de automação

Ao decidir sobre uma plataforma para automação de PDFs, veja como a Latenode se compara às ferramentas tradicionais:

Para uso empresarial, o plano Prime da Latenode (US$ 297/mês) oferece suporte a até 1,5 milhão de execuções de fluxos e mantém o histórico de execução por 60 dias. Isso faz dela uma ótima opção para empresas com necessidades de geração de PDFs em alto volume.

A plataforma também simplifica tarefas como modificar o estilo da página antes de criar um PDF. Por exemplo, você pode ocultar elementos específicos com este trecho:

await page.addStyleTag({ 
    content: '.nav { display: none } .navbar { border: 0px } #print-button { display: none }' 
});

Essa flexibilidade ajuda a simplificar até os fluxos de PDF mais complexos.

Conclusão

Revisão dos pontos principais

Puppeteer é uma ferramenta poderosa para gerar PDFs, seja para documentos simples ou relatórios complexos. Sua capacidade de lidar com tecnologias web modernas e oferecer controle preciso sobre a saída em PDF faz dela uma escolha sólida para casos de uso em larga escala.

Por exemplo, a Carriyo usou Puppeteer com sucesso em abril de 2024 para gerar 10.000 PDFs diários de etiquetas de envio no AWS Lambda. A empresa alcançou uma latência p95 de 365 ms a um custo de US$ 7,68 para 430.000 invocações [7].

Veja alguns recursos importantes e seus benefícios práticos:

Dicas para começar

Para aproveitar ao máximo o Puppeteer, considere estas etapas para uma implementação bem-sucedida:

• Otimização de desempenho: Use a configuração userDataDir para armazenar recursos em cache e desative funcionalidades não utilizadas para acelerar a geração de PDFs [4].
• Gerenciamento de recursos: Gere PDFs no lado do servidor para reduzir a carga nos dispositivos do cliente, especialmente em tarefas de alto volume [1].
• Tratamento de erros: Implemente estratégias robustas de tratamento de erros, com tempos limite e mecanismos de nova tentativa, para manter os ambientes de produção estáveis [7].

Para uma experiência ainda mais fluida, você pode integrar Puppeteer a plataformas como a Latenode para simplificar fluxos e manter o máximo desempenho.