Nesse artigo você ira aprender a gerar, de uma forma rápida, um PDF a partir de um documento HTML, em um projeto Angular.
- 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-generatorDepois 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-creatorA 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.0npm 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.
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.


Finalmente, temos o PDF funcionando:

Para acessar o código completo e funcionando, do exemplo desse artigo, é só acessar o github.