Como fazer download de arquivo no Angular

Neste artigo você vai aprender a como fazer download de arquivo no Angular, vem conferir como é fácil baixar arquivos com Angular!

Fala programador(a), beleza? Bora aprender mais sobre download de arquivos no framework Angular!

Introdução:

Ao trabalhar com aplicativos da web, você pode se deparar com a necessidade de permitir que os usuários baixem arquivos, como documentos ou imagens.

Neste artigo, você aprenderá a implementar o download de arquivo no Angular, uma das frameworks mais populares para desenvolvimento web.

Vamos explorar como criar um serviço e um componente que possibilitem o download de arquivos de diferentes tipos.

Crie um serviço para lidar com o download de arquivo

Para começar, vamos criar um serviço Angular que será responsável por lidar com o processo de download de arquivo no Angular.

Utilize o Angular CLI para gerar um novo serviço:

ng generate service download

Agora, abra o arquivo download.service.ts e adicione o seguinte código:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { saveAs } from 'file-saver';

@Injectable({
  providedIn: 'root'
})
export class DownloadService {

  constructor(private httpClient: HttpClient) { }

  downloadFile(url: string, fileName: string): void {
    this.httpClient.get(url, { responseType: 'blob' }).subscribe((data) => {
      saveAs(data, fileName);
    });
  }
}

Neste serviço, estamos importando o HttpClient e o módulo saveAs da biblioteca file-saver.

A função downloadFile recebe a URL do arquivo e o nome do arquivo como parâmetros.

A opção responseType: 'blob' é usada para obter o arquivo como um Blob.

Em seguida, a função saveAs da biblioteca file-saver é usada para salvar o arquivo no dispositivo do usuário.

Crie um componente para download de arquivo

Agora que temos um serviço para lidar com o download de arquivo no Angular, vamos criar um componente para acionar o download.

Use o Angular CLI para gerar um novo componente:

ng generate component download-button

Abra o arquivo download-button.component.ts e adicione o seguinte código:

import { Component, Input } from '@angular/core';
import { DownloadService } from '../download.service';

@Component({
  selector: 'app-download-button',
  templateUrl: './download-button.component.html',
  styleUrls: ['./download-button.component.css']
})
export class DownloadButtonComponent {
  @Input() fileUrl: string;
  @Input() fileName: string;

  constructor(private downloadService: DownloadService) { }

  download(): void {
    this.downloadService.downloadFile(this.fileUrl, this.fileName);
  }
}

Neste componente, estamos usando o Input para receber a URL do arquivo e o nome do arquivo como propriedades do componente.

A função download é chamada quando o usuário clica no botão de download e aciona a função downloadFile do serviço DownloadService.

Abra o arquivo download-button.component.html e adicione o seguinte código:

<button (click)="download()">Download</button>

Utilize o componente no seu aplicativo

Por fim, para usar o componente de download de arquivo no Angular em seu aplicativo, adicione a tag do componente no arquivo HTML onde você deseja que o botão de download apareça.

Por exemplo, no arquivo app.component.html:

<app-download-button [fileUrl]="fileUrl" [fileName]="fileName"></app-download-button

Instale a biblioteca ‘file-saver’

Como mencionado anteriormente, estamos usando a biblioteca file-saver para ajudar a salvar o arquivo no dispositivo do usuário.

Para instalar a biblioteca, execute o seguinte comando:

npm install file-saver

Se você estiver usando o TypeScript, instale também os tipos para a biblioteca file-saver:

npm install @types/file-saver

Atualize o AppModule

Para utilizar o HttpClient e o serviço de download de arquivo no Angular, é necessário importar o HttpClientModule no AppModule.

Abra o arquivo app.module.ts e atualize-o da seguinte maneira:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { DownloadButtonComponent } from './download-button/download-button.component';
import { DownloadService } from './download.service';

@NgModule({
  declarations: [
    AppComponent,
    DownloadButtonComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [DownloadService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Teste o download de arquivo no Angular

Agora você pode testar o download de arquivo no Angular. Abra o arquivo app.component.ts e adicione uma URL de arquivo e um nome de arquivo para teste:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  fileUrl = 'https://example.com/path/to/your/file.pdf';
  fileName = 'example-file.pdf';
}

Substitua a URL do arquivo e o nome do arquivo pelos valores desejados e inicie o aplicativo Angular para ver o botão de download em ação.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Neste artigo, aprendemos como implementar o download de arquivo no Angular, criando um serviço e um componente para gerenciar o processo.

Utilizamos a biblioteca file-saver para salvar arquivos no dispositivo do usuário.

Agora você pode adaptar e personalizar esse exemplo para atender às necessidades específicas do seu projeto.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!