Como gerar arquivo pdf com JavaScript

Neste artigo você vai aprender a como gerar arquivo pdf com JavaScript, de forma simples e que vai atender suas necessidades.

Fala programador(a), beleza? Bora aprender mais sobre geração de arquivos com JavaScript

Gerar um arquivo PDF a partir de um documento HTML é uma tarefa bem comum quando trabalhamos com aplicações web.

Isso pode ser feito de diversas formas, mas uma das mais populares é utilizando JavaScript.

Conteúdo também disponível em vídeo:

Existem várias bibliotecas e frameworks que podem ser utilizados para gerar PDFs com JavaScript, mas neste artigo vamos utilizar a biblioteca jsPDF.

Ela é bem simples de ser utilizada e possui uma ampla gama de recursos para gerar PDFs com qualidade.

Para começar, precisamos incluir a biblioteca jsPDF em nossa aplicação.

Podemos fazer isso de duas formas: baixando o arquivo jsPDF e incluindo-o em nossa aplicação manualmente ou utilizando um CDN (Content Delivery Network).

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Se optarmos por baixar o arquivo jsPDF, basta incluir o seguinte código no head de nossa página:

<script src="/caminho/para/jspdf.min.js"></script>

Se optarmos por utilizar um CDN, basta incluir o seguinte código no head de nossa página:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.2.0/jspdf.min.js"></script>

Em seguida, podemos começar a utilizar a biblioteca jsPDF para gerar nosso PDF. Vamos ver um exemplo de como fazer isso:

function gerarPDF() {
// Cria um novo documento PDF com o tamanho desejado
var doc = new jsPDF("p", "mm", "a4");

// Insere o HTML da página atual no documento PDF
doc.html(document.body);

// Salva o documento PDF com o nome desejado
doc.save("meu-pdf.pdf");
}

Nesse exemplo, criamos uma função chamada `gerarPDF` que utiliza a biblioteca jsPDF para criar um novo documento PDF com o tamanho de uma folha A4.

Em seguida, utilizamos o método `html` para inserir o HTML da página atual no documento PDF. Por fim, utilizamos o método `save` para salvar o documento PDF com o nome “meu-pdf.pdf”.

Como gerar arquivo pdf com Node JS

Outra forma de gerar um PDF com JavaScript é utilizando o módulo pdfkit do Node.js.

Esse módulo é bem completo e possui uma ampla gama de recursos para gerar PDFs com qualidade.

Para começar, precisamos instalar o módulo pdfkit em nossa aplicação.

Podemos fazer isso utilizando o seguinte comando:

npm install pdfkit

Em seguida, podemos começar a utilizar o módulo pdfkit para gerar nosso PDF. Vamos ver um exemplo de como fazer isso:

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

function gerarPDF() {
  // Cria um novo documento PDF com o tamanho desejado
  const doc = new PDFDocument({ size: "A4" });

  // Insere o conteúdo desejado no documento PDF
  doc.text("Olá, mundo!");

  // Salva o documento PDF em um arquivo
  doc.pipe(fs.createWriteStream("meu-pdf.pdf"));
  doc.end();
}

Nesse exemplo, criamos uma função chamada gerarPDF que utiliza o módulo pdfkit para criar um novo documento PDF com o tamanho de uma folha A4.

Em seguida, utilizamos o método text para inserir o texto "Olá, mundo!" no documento PDF.

Por fim, utilizamos os métodos pipe e end para salvar o documento PDF em um arquivo com o nome “meu-pdf.pdf”.

Além do método text, o módulo pdfkit possui diversos outros métodos que podem ser utilizados para inserir outros tipos de conteúdo no documento PDF, como imagens, formulários e tabelas.

Também é possível personalizar muitas outras opções, como margens, fonte e cores.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você aprendeu a como gerar arquivo pdf com JavaScript

Utilizamos duas abordagens distintas, basta agora implementar a que melhor atende as suas necessidades no seu código!

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Qual abordagem escolher: navegador ou Node?

A pergunta que sempre pinta: uso jsPDF ou pdfkit?

A resposta depende de ONDE o PDF nasce

Se o usuário clica num botão na tela e o arquivo tem que sair na hora, no próprio navegador, o jsPDF resolve sem depender de servidor

Agora se o PDF sai no back-end (um relatório que vai por email, uma nota, algo automático), o pdfkit no Node é o caminho, porque roda no servidor e você controla tudo antes de entregar

Resumindo: front-end pra ação imediata do usuário, back-end pra processo automatizado

Os dois exemplos aqui de cima funcionam, é só escolher o que casa com o seu cenário 🙂

Perguntas frequentes sobre gerar PDF com JavaScript

Dá pra gerar PDF em JavaScript sem biblioteca?

Dá pra montar na mão, mas é trabalhoso e cheio de detalhe chato

Por isso o pessoal parte pro jsPDF ou pro pdfkit, que já entregam os métodos prontos e poupam tempo

jsPDF roda no navegador ou no servidor?

O jsPDF é pensado pro navegador, no front-end, gerando o arquivo direto na tela do usuário

Quando você precisa gerar no servidor com Node, o pdfkit encaixa melhor

Como gerar um PDF com o visual da página HTML?

Dá pra jogar o HTML dentro do PDF, mas manter o estilo idêntico ao da página é a parte trabalhosa

Capturar o layout com o CSS costuma pedir uma etapa extra de renderização, então ajuste a expectativa e teste sempre com o seu conteúdo real antes de confiar no resultado