DEV Community

Lucas Pereira de Souza
Lucas Pereira de Souza

Posted on

Gerando PDFs com Node.js

logotech

## Criando e Salvando PDFs com JavaScript: Uma Jornada com jsPDF e PDFKit

No mundo do desenvolvimento web, a capacidade de gerar e manipular documentos PDF diretamente do navegador ou do lado do servidor é uma habilidade valiosa. Seja para criar relatórios, faturas, documentos de texto ou layouts personalizados, a geração de PDFs oferece uma solução flexível e profissional. Neste artigo, exploraremos duas bibliotecas JavaScript poderosas – jsPDF e PDFKit – que simplificam essa tarefa.

jsPDF: Simples e Direta para o Navegador

jsPDF é uma biblioteca JavaScript popular, focada em simplicidade e facilidade de uso, especialmente no ambiente do navegador. Ela permite que você crie documentos PDF a partir do zero ou converta conteúdo HTML existente.

Instalação:

Você pode incluir jsPDF em seu projeto de várias maneiras:

  • CDN: A forma mais simples de começar é usando a CDN (Content Delivery Network):

    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js\"></script>
    
  • npm: Se você usa um gerenciador de pacotes como npm, instale a biblioteca:

    npm install jspdf
    

Exemplo de Uso:

Vamos criar um PDF simples com texto usando jsPDF:

import { jsPDF } from \"jspdf\";

function criarPDF() {
  const doc = new jsPDF();
  doc.text(\"Olá, Mundo! Este é um PDF gerado com jsPDF.\", 10, 10);
  doc.save(\"exemplo.pdf\"); // Salva o arquivo no navegador
}

criarPDF();
Enter fullscreen mode Exit fullscreen mode

Explicando o Código:

  1. import { jsPDF } from \"jspdf\";: Importa a classe jsPDF da biblioteca.
  2. const doc = new jsPDF();: Cria uma nova instância do objeto jsPDF, que representa o documento PDF.
  3. doc.text(\"Olá, Mundo! ...\", 10, 10);: Adiciona texto ao PDF. Os números 10, 10 representam as coordenadas (x, y) onde o texto será renderizado.
  4. doc.save(\"exemplo.pdf\");: Salva o PDF no dispositivo do usuário, geralmente abrindo a caixa de diálogo \"Salvar como".

Recursos Adicionais do jsPDF:

  • Adição de Imagens: doc.addImage() permite inserir imagens no PDF.
  • Formatação de Texto: Controle de fontes, tamanhos, cores e alinhamentos.
  • Tabelas: Criação de tabelas simples.
  • HTML to PDF: Converta elementos HTML para PDF usando a função html() (requer a inclusão da extensão html2canvas).

PDFKit: Poder e Flexibilidade no Servidor

PDFKit é uma biblioteca JavaScript poderosa para geração de PDFs, frequentemente usada no lado do servidor (Node.js). Ela oferece mais controle sobre o layout e a formatação do documento em comparação com jsPDF.

Instalação (Node.js):

npm install pdfkit
Enter fullscreen mode Exit fullscreen mode

Exemplo de Uso (Node.js):

const PDFDocument = require('pdfkit');
const fs = require('fs');

function criarPDF() {
  const doc = new PDFDocument();

  // Pipe the document to a writable stream (e.g., a file)
  doc.pipe(fs.createWriteStream('exemplo_pdfkit.pdf'));

  doc.fontSize(20)
     .text('Olá, PDFKit!', 100, 100);

  // Finalize PDF
  doc.end();
}

criarPDF();
Enter fullscreen mode Exit fullscreen mode

Explicando o Código:

  1. const PDFDocument = require('pdfkit');: Importa a biblioteca PDFKit.
  2. const fs = require('fs');: Importa o módulo fs (file system) do Node.js para lidar com arquivos.
  3. doc.pipe(fs.createWriteStream('exemplo_pdfkit.pdf'));: Define onde o PDF será salvo (neste caso, em um arquivo chamado exemplo_pdfkit.pdf).
  4. doc.fontSize(20).text('Olá, PDFKit!', 100, 100);: Adiciona texto com um tamanho de fonte específico.
  5. doc.end();: Finaliza a criação do PDF.

Recursos Adicionais do PDFKit:

  • Layout Avançado: Mais controle sobre a posição dos elementos, incluindo posicionamento absoluto e relativo.
  • Desenho de Formas: Suporte para desenho de linhas, retângulos, círculos e outras formas geométricas.
  • Adição de Imagens: Suporte para imagens com opções de dimensionamento e posicionamento.
  • Fontes Personalizadas: Use fontes customizadas.
  • Streams: A capacidade de gerar PDFs em streams, ideal para lidar com grandes documentos ou para streaming para o navegador.

Escolhendo a Biblioteca Certa

  • jsPDF: Ideal para projetos front-end, onde a simplicidade e o tamanho reduzido são importantes. Ótimo para gerar PDFs simples com texto, imagens e algumas formatações básicas.
  • PDFKit: Mais adequado para projetos back-end (Node.js) que exigem mais controle sobre o layout, formatação e manipulação de arquivos. Oferece mais flexibilidade para criar documentos complexos.

Conclusão

Tanto jsPDF quanto PDFKit são ferramentas valiosas para a geração de PDFs em JavaScript. A escolha da biblioteca ideal dependerá dos requisitos do seu projeto e do ambiente em que você está trabalhando. Com ambas as bibliotecas, você pode criar documentos PDF dinâmicos e personalizados, abrindo um leque de possibilidades para seus aplicativos web. Explore a documentação de cada biblioteca para descobrir todos os seus recursos e liberar todo o potencial na criação de documentos PDF!

Top comments (0)