Criando um PDF a partir de um HTML em um projeto Angular

Nesse artigo você ira aprender a gerar, de uma forma rápida, um PDF a partir de um documento HTML, em um projeto Angular.

1. Criar um novo projeto Angular

Para criar um projeto angular basta instalar o framework (para mais informação acessar a documentação oficial aqui.

ng new pdf-generator

Depois do projeto configurado e feito as primeiras configurações, iremos criar mais dois componentes: pdf-page e pdf-creator.

ng g c pdf-page
ng g c pdf-creator

A ideia aqui é gerar uma tabela de preços de carros, cujo usuário possa selecionar os carros de uma lista e gerar um pdf a partir dos itens selecionados.

Sendo assim, o primeiro componente, pdf-page, sera o template do nosso PDF. O segundo componente, pdf-creator, ficará toda a lógica de criação e onde o usuário poderá escolher os dados que aparecerão no PDF.

2. Instalar as bibliotecas necessárias

Bibliotecas necessárias:
https://www.npmjs.com/package/html2pdf.js/v/0.9.0

npm install html2pdf.js

Outras libs (opcional):
https://material.angular.io/

ng add @angular/material

Vamos adicionar o Angular Material para facilitar nossa vida com a criação de um botão e uma lista com check-boxes.

3. Criação da tela de gerar PDF

No componente pdf-creator precisaremos criar uma variavel do tipo ViewContainerRef que fará referencia para uma tag, onde sera encapsulado o HTML do PDF.

Ainda no pdf-creator será criado uma lista com as informações dos carros:

O html da página ficará assim:

O resultado da tela de criação de PDF é esse:

Ainda nessa tela, falta criar a lógica de gerar o PDF. É necessario criar uma instância do componente com o html do pdf pdf-creator (linhas 60 e 61) e passar os valores dos atributos (linhas 63 e 64). Por fim é preciso esperar uma resposta do emitter, criado no pdf-page certificando que a criação a instância foi finalizada. Após isso, é chamado o método print, que vai usar essa instancia criada pra gerar o PDF. Toda essa lógica é feita a partir do clique do botão ‘gerar pdf!’, que por conseguinte, chama o método selectItems.

Existem configurações que podem ser utilizadas no PDF. Essas configurações estão exemplificadas na constante config (linha 67). Outras configurações podem ser adicionadas, e para mais informações acessar a documentação da biblioteca aqui.

Agora vamos partir para o componente do PDF propriamente dito:

4. Criar componente do PDF

O .ts do componente pdf-page precisa possuir atributos que receberão as informações que serão inseridas no PDF criado. No caso do exemplo, existem os atributos priceList, que receberá a lista de carros selecionados pelo usuário e o title, que receberá o título da página.

Além disso, existe o atributo emitter, que tem a finalidade de avisar quando as informações terminarem de ser processadas no html, e o html2pdf possa criar o arquivo PDF.