Gerando arquivos PDF com JavaScript

Diego Martins de Pinho
Feb 18 · 3 min read

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.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>
npm install jspdf --save
yarn add jspdf
var doc = new jsPDF()
doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')
var doc = new jsPDF({
orientation: 'landscape',
unit: 'cm',
format: 'letter'
})

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:

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

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);
PDF criado usando o jsPDF

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

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