Diego Martins de Pinho
Feb 18 · 3 min read

Não é novidade nenhuma que o JavaScript hoje é praticamente uma solução universal para qualquer problema tecnológico. Desde aplicações web, até IoT (Internet das Coisas) — conseguimos fazer de tudo com a linguagem. E para o problema de geração de arquivos em PDF, a situação é a mesma: o JavaScript também é a solução.

Se procurarmos na internet como fazer isso, vamos nos deparar com uma quantidade considerável de opções. Existem boas, ruins e medianas, mas das que usamos até então, a que se apresentou a melhor foi o jsPDF.

Vamos ver como ela funciona.

Gerando PDFs loucamente

O jsPDF é um projeto open source disponível no GitHub por meio da licença MIT e que já tem mais de 15000 estrelas no repositório. O objetivo da biblioteca é bem simples: gerar PDFs por meio do JavaScript no client-side.

O primeiro passo para utilizar ela é trazê-la para o seu projeto. O jeito mais fácil é por meio da tag script no HTML, apontando para a biblioteca hospedada no CloudFlare. Para isso, faça:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>

Caso esteja utilizando o yarn ou npm, basta executar:

npm install jspdf --save
yarn add jspdf

Feito isso já podemos começar a trabalhar no nosso PDF. Primeiramente criamos uma nova instância do objeto jsPDF. Com o objeto em mãos, podemos usar o método text() para inserir um texto. Por fim, usamos o método save() para gravar e gerar o documento em PDF. Este código todo não passa de três linhas.

var doc = new jsPDF()
doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')

Mas isso é só o primeiro passo. Por definição, o pdf exportado é no tamanho A4, na orientação retrato e usa milímetros como unidade de medida. Mas tudo isso é configurável. Na função construtora jsPDF() podemos passar um objetos de configuração com todos estes parâmetros:

var doc = new jsPDF({
orientation: 'landscape',
unit: 'cm',
format: 'letter'
})

Note que agora temos um pdf no formato paisagem usando centímetros como unidade de medida. Além disso, também configuramos para o tamanho ser no formato carta. Todas configurações disponíveis estão nesta página.

Texto é só o começo

Vimos que o método text() adiciona texto ao pdf., mas se a biblioteca se limitasse a isso, não seria tão interessante. O jsPDF nos oferece várias APIs para criar formas, imagens e figuras. Segue algumas delas abaixo:

  • circle
  • addImage
  • addFont
  • ellipse
  • line
  • triangle
  • rect

Todos os métodos disponíveis estão na documentação.

Testando os PDFs

Para poder testar os PDFs e ver os seus resultados na prática, podemos usar este link. Do lado esquerdo adicionamos o código e do lado direito o pdf é gerado de acordo com as suas especificações, como no exemplo a seguir:

var imgData = ""; // base-64
var doc = new jsPDF();
doc.setFontSize(40);
doc.text(35, 25, "Artigo para o iMasters");
doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);

O resultado é o seguinte:

PDF criado usando o jsPDF

ps: Repare que no exemplo anterior não inserimos o código da imagem em base64 porque ficaria bem extenso. Mas você pode codificar qualquer imagem para usar neste site.

E ai, o que acharam? Estão prontos para gerar uns PDFs?

Referências


Gostou? Recomende 👏 este artigo e acompanhe nossa publicação para não perder os próximos conteúdos!

Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.brFacebook, Twitter, Youtube

Siga o autor deste artigo e troque uma ideia com ele! http://www.diegopinho.com.brTwitter, LinkedIn

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia

Diego Martins de Pinho

Written by

Desenvolvedor de Software, Fundador da CodePrestige e autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade