Gerar PDF é uma necessidade comum nos mais diversos contextos e tipos de aplicação. Não é difícil nos depararmos com a demanda de exportar relatórios nesse formato, sejam eles sem formato de lista/tabela, ou ainda fichas, com formas geométricas, imagens, etc.
Se essa é sua necessidade nesse momento e você está trabalhando com o Angular, então você veio ao lugar certo: neste post vamos lhe ensinar a criar documentos em formato PDF usando apenas JavasCript, no lado cliente. Para isso utilizaremos uma biblioteca chamada jsPDF.
Por se tratar de uma biblioteca JavaScript, você pode usá-la em conjunto com o Angular, React, Vue, etc. As principais diferenças estarão na forma de adicioná-la e referenciá-la em seu projeto.
Instalação
A jsPDF está disponível na forma de um pacote do NPM, logo, podemos instalá-la com o seguinte comando:
npm install jsPDFObservação: se você está usando uma versão do NPM inferior à 5, use o parâmetro - -save para registrar o pacote como dependência no arquivo package.json.
Em seguida, adicione o script no arquivo .angular-cli.json:
"scripts": [ "../node_modules/jspdf/dist/jspdf.min.js" ]Isso é o bastante. Agora já podemos usar a biblioteca e gerar nosso primeiro documento.
Gerando o PDF
Para gerar o PDF, o primeiro passo é importar a classe jsPDF do pacote recém instalado. Devemos fazer isso no arquivo TypeScript em que criaremos o documento (em um componente, por exemplo):
import * as jsPDF from 'jspdf';Agora vamos usar essa classe para gerar o documento e abri-lo em uma nova janela:
A função text escreve um texto no documento nas posições X (horizontal) e Y (vertical), passadas como parâmetro. Em seguida, a função output define como o documento deve ser aberto. Nesse caso, em uma nova janela.
Há ainda diversos outros métodos que podem ser usados para enriquecer a estrutura do PDF. Por exemplo:
O resultado aqui é o seguinte:
A documentação completa da biblioteca, com todos os seus métodos e opções, pode ser encontrada no seguinte link: https://rawgit.com/MrRio/jsPDF/master/docs/
Fácil, não é mesmo? E aí, o que você achou? Conte para nós. =)
