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 PDFs, a situação é a mesma: o JavaScript também é a solução.

Se procurarmos na internet como fazer isso, vamos nos deparar com uma grande quantidade de opções. Existem boas, existem ruins e medianas, mas das que eu usei, até hoje 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 12600 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. As 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:

Até o próximo artigo, pessoal!