Download de pdf com Angular 13
ATENÇÃO: lance um curso na Udemy que ensina como realizar download de arquivos . Se voçê quiser conferir clica nesse link aqui: https://bit.ly/curso-angular15-na-pratica
Olá pessoal, tudo bem?
Hoje trago para vocês um assunto bem interessante, trata-se de download de arquivo pdf. Vamos consumir uma api que foi criada num post anterior. Para acessar o post clique aqui: construindo uma api para download de pdf com Nodejs + express.
Pré-requisitos
- Nodejs
- Angular CLI
Configurações iniciais
Para começar vamos deixar nossa api executando em segundo plano, para isso, entre no pasta da api cd/api e digite node index.js
Criando o projeto front-end
Para criar o projeto vamos precisar do Angular CLI, para isso digite:
Com o angular CLI instalado, vamos criar nosso projeto, portanto abra o terminal/prompt e digite:
nas configurações do projeto, quando questionado se deseja adicionar roteamento ao projeto, escolha N.
Agora, a opção é para escolher qual formato de folha de estilo você deseja usar. Vamos escolher CSS. Aperte Enter para continuar.
pronto projeto criado com sucesso. Agora entre na pasta do projeto digite: cd/download-pdf
agora vamos inciar o servidor da aplicação, para isso digite: ng s
para visualizar a aplicação, abra o navegador e digite o endereço: http://localhost:4200
Abrindo o projeto no Visual Studio Code
Abra o Visual Studio Code e vá em file -> open folder e escolha a pasta download-pdf
Criando o serviço de download de pdf
Vamos usar o Angular CLI para criar o serviço, então abra terminal do Visual Studio Code, vá em Terminal -> new Terminal. Agora digite o comando:
Pronto, criamos o arquivo de serviço! daqui a pouco vamos mexer nele.
Criando o método de download de pdf
Antes de criar o método de download de pdf, precisamos importar HttpClienteModule no arquivo app.module.ts. Portanto aperte Control + p e digite: app.module.ts.
No arquivo app.module.ts Insira o import do HttpClientModule.
E agora no array de imports, declare o HttpClientModule.
Pronto, configuramos o necessário para fazer requisições. Agora voltaremos a mexer no nosso arquivo de serviço. Aperte Control + p e digite: api.service.ts. Nele vamos importar o HttpClient e o HttpHeaders.
Agora vamos injetar o HttpClient no constructor do nosso serviço. Para isso, implemente o seguinte código:
Agora vamos definir uma variável para guardar a url da nossa api. portanto digite no serviço o seguinte:
Agora é hora de implementar o método que será responsável por bater na api e retornar o pdf. No serviço digite:
Pronto finalizamos a implementação do nosso serviço. Com isso temos o seguinte código:
Repare no parâmetro responseType: ‘blob’, ele é imprescindível para o download do pdf funcionar.
Utilizando o serviço no component
Agora vamos integrar o serviço criado em nosso component app.component.ts. Portanto abra o component apertando Control + p, e digite app.component.ts. Com o arquivo aberto injete o serviço recém criado.
Chegou a hora de criar o método que será responsável por bater no serviço, então digite:
Após isso nosso component ficou com o seguinte código:
Agora precisamos apenas criar um botão para realizar o download do pdf. Abra o arquivo app.component.html aperte Control + p e digite: app.component.html.
Substitua todo o conteúdo desse arquivo pelo seguinte:
Volte ao navegador no endereço: localhost:4200
Testando nossa aplicação
Chegou a hora testar o download do pdf. clique no botão Baixar pdf.
Resumo final
Nesse post vimos como realizar o download do arquivo no navegador com uma aplicação front-end angular 13. No próximo post veremos como baixar outros tipos de arquivos.
Obrigado por me acompanhar até aqui!!
Se quiser falar comigo, segue meu twitter: @danilodev_silva
