Gerando arquivos PDF com JavaScript

Published in

Code Prestige

3 min readFeb 18, 2019

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.

—

Versão em vídeo

Além das instruções que daremos abaixo, você também pode acompanhar todos os passos que serão feitos na versão em vídeo!

—

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:

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

https://imasters.com.br/front-end/gerando-pdfs-com-js

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.br • Facebook, Twitter, Youtube
Siga o autor deste artigo e troque uma ideia com ele! http://www.diegopinho.com.br • Twitter, LinkedIn