Como criar uma barra de progresso de download de arquivo em Angular 8
Baixar arquivos é uma tarefa comum para aplicativos da web. Seja um PDF, ZIP ou qualquer outro arquivo binário ou baseado em texto, você deseja torná-lo acessível e fácil de usar para seus usuários. Uma maneira de fazer isso é criar uma barra de progresso de download de arquivo que mostre quanto do arquivo foi baixado e quanto tempo levará para ser concluído.
Uma barra de progresso de download de arquivo pode melhorar a experiência do usuário, fornecendo feedback, reduzindo a incerteza e aumentando a confiança. Também pode impedir que os usuários cancelem ou interrompam o processo de download, o que pode causar erros ou perda de dados.
file download progress bar in angular 8
Neste artigo, você aprenderá como criar uma barra de progresso de download de arquivo no Angular 8 usando três opções diferentes: usando um link HTML simples, usando HttpClient e RxJS e usando Angular Material Progress Bar. Você também aprenderá os prós e contras de cada opção e algumas práticas recomendadas para criar uma barra de progresso de download de arquivo no Angular 8.
Opção 1: usando um link HTML simples
A maneira mais simples de criar um link de download de arquivo em Angular é usar HTML simples com uma tag âncora apontando para a URL do arquivo com o atributo href. O atributo download informa ao navegador que ele não deve seguir o link, mas sim baixar o URL de destino. Você também pode especificar seu valor para definir o nome do arquivo que está sendo baixado.
Por exemplo, você pode criar um link de download para um arquivo archive.zip como este:
<a href="/downloads/archive.zip" download="archive.zip">archive.zip</a>
Você pode vincular qualquer um desses atributos com Angular para definir a URL e o nome do arquivo dinamicamente:
<a [href]="download.url" [download]="download.filename"> download.filename </a>
Navegadores mais antigos, como o Internet Explorer, podem não reconhecer o atributo de download. Nesses casos, você pode abrir o download em uma nova guia do navegador com o atributo de destino definido como _blank. Certifique-se de sempre incluir rel="noopener noreferrer" quando estiver usando target="_blank" para não se expor a vulnerabilidades de segurança.
<a [href]="download.url" target="_blank" rel="noopener noreferrer"> download.filename </a>
Se não houver atributo de download, o nome do arquivo para download dependerá exclusivamente do cabeçalho HTTP Content-Disposition enviado pelo servidor que está fornecendo o arquivo. As informações desse cabeçalho também podem ter precedência mesmo se o atributo de download estiver presente.
Uma solução baseada em link está em conformidade com os padrões HTML e permite que o navegador faça a maior parte do trabalho. No entanto, se você deseja mais controle sobre o download e deseja exibir algum indicador de progresso personalizado, também pode baixar arquivos por meio do HttpClient do Angular.
Opção 2: usando HttpClient e RxJS
Um arquivo é melhor representado como um Blob no navegador:
O objeto Blob representa um Um arquivo é melhor representado como um Blob no navegador:
O objeto Blob representa um blob, que é um objeto semelhante a um arquivo de dados brutos e imutáveis; eles podem ser lidos como texto ou dados binários ou convertidos em um ReadableStream para que seus métodos possam ser usados para processar os dados.
Para baixar um arquivo como um Blob, você pode usar o serviço HttpClient do módulo HTTP comum do Angular. Você precisa injetá-lo em seu componente ou serviço e, em seguida, executar uma solicitação GET com a opção responseType definida como blob:
importar HttpClient de '@angular/common/http'; constructor(private http: HttpClient) downloadFile(url: string) return this.http.get(url, responseType: 'blob' );
Isso retornará um Observable que você pode assinar e obter os dados do arquivo. No entanto, isso não fornecerá nenhuma informação sobre o andamento do download. Para conseguir isso, você precisa usar mais duas opções: reportProgress e observe.
A opção reportProgress é um booleano que indica se o HttpClient deve ou não rastrear e relatar o andamento da solicitação. A opção observe é uma string que especifica que tipo de eventos você deseja observar. Os valores possíveis são corpo, resposta e eventos. O valor padrão é corpo, o que significa que você obtém apenas o corpo da resposta final.O valor da resposta significa que você obtém o objeto HttpResponse completo com cabeçalhos e status. O valor de eventos significa que você obtém todos os HttpEvents que ocorrem durante o ciclo de vida da solicitação, como enviado, progresso de upload, cabeçalho de resposta, progresso de download e resposta.
Para obter os eventos de progresso do download, você precisa definir reportProgress e observe como true e events, respectivamente:
downloadFile(url: string) return this.http.get(url, responseType: 'blob', reportProgress: true, observe: 'events' );
Isso retornará um Observable> que você pode assinar e filtrar pela enumeração HttpEventType.DownloadProgress. Este evento possui duas propriedades: carregado e total. A propriedade carregada é o número de bytes que foram baixados até agora. A propriedade total é o número total de bytes a serem baixados, se conhecido. Você pode usar essas propriedades para calcular a porcentagem do progresso do download e exibi-la em sua interface do usuário.
Após a conclusão do download, você obterá um evento HttpEventType.Response com os dados do Blob em sua propriedade de corpo. Você pode então usar a função saveAs de FileSaver.js, uma biblioteca que implementa a interface HTML5 saveAs() FileSaver em navegadores que não a suportam nativamente, para salvar o arquivo em disco. Você também pode usar o nome de arquivo do cabeçalho Content-Disposition ou de sua própria lógica.
Aqui está um exemplo de como usar HttpClient e RxJS para baixar um arquivo e mostrar seu progresso:
importar Componente de '@angular/core'; import HttpClient, HttpEventType de '@angular/common/http'; importar saveAs de 'protetor de arquivo'; @Component( selector: 'app-download', template: ` Download progresso % ` ) classe de exportação DownloadComponent progresso: número; constructor(private http: HttpClient) downloadFile() this.http .get('/downloads/archive.zip', responseType: 'blob', reportProgress: true, observe: 'events' ) .subscribe((event) => if (event.type === HttpEventType.DownloadProgress) this.progress = Math.round((100 * event.loaded) / event. total); else if (event.type === HttpEventType.Response) const filename = event.headers .get('content-disposition') .split(';')[1] .split('=')[1] .replace(/"/g, ''); saveAs(event.body, filename); );
O uso de HttpClient e RxJS oferece mais controle sobre o processo de download e permite criar indicadores de progresso personalizados. No entanto, se você quiser uma solução pronta que siga as diretrizes de design de material do Angular, também pode usar a barra de progresso do material Angular.
Opção 3: usando a barra de progresso de material angular
Angular Material Progress Bar é um componente que fornece uma barra horizontal para indicar o progresso de uma operação. Ele suporta quatro modos: determinado, indeterminado, buffer e consulta. O modo determinado é usado quando a porcentagem da operação é conhecida. O modo indeterminado é usado quando a porcentagem da operação é desconhecida Angular Material Progress Bar é um componente que fornece uma barra horizontal para indicar o progresso de uma operação. Ele suporta quatro modos: determinado, indeterminado, buffer e consulta. O modo determinado é usado quando a porcentagem da operação é conhecida.O modo indeterminado é usado quando a porcentagem da operação é desconhecida ou infinita. O modo buffer é usado quando a porcentagem da operação é conhecida, mas há algum carregamento adicional que ainda não foi concluído. O modo de consulta é usado quando o andamento da operação depende de um fator externo, como uma resposta do servidor.
Para usar a Angular Material Progress Bar, você precisa instalar e importar o MatProgressBarModule de @angular/material/progress-bar:
npm install --save @angular/material @angular/cdk @angular/animations import MatProgressBarModule de '@angular/material/progress-bar'; @NgModule( imports: [MatProgressBarModule] ) classe de exportação AppModule
Em seguida, você pode usar o componente mat-progress-bar em seu modelo com as entradas de modo e valor. A entrada do modo pode ser um dos quatro modos mencionados acima. A entrada de valor pode ser um número entre 0 e 100 que representa a porcentagem do progresso. Por exemplo, você pode criar uma determinada barra de progresso como esta:
<mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
Você também pode usar a entrada de cores para alterar a cor da barra de progresso. Os valores possíveis são primário, acentuação e aviso, que correspondem às cores do tema definidas pelo Angular Material. Por exemplo, você pode criar uma barra de progresso vermelha como esta:
<mat-progress-bar mode="determinate" [value]="progress" color="warn"></mat-progress-bar>
Você também pode estilizar e personalizar a aparência da barra de progresso usando classes e variáveis CSS. Por exemplo, você pode alterar a altura, a cor do plano de fundo e a duração da animação da barra de progresso da seguinte forma:
<style> .custom-progress-bar height: 20px; background-color: lightgray; --mat-progress-bar-animation-duration: 2s; </style> <mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
O uso da barra de progresso de material Angular oferece uma solução pronta que segue as diretrizes de design de material do Angular e fornece uma aparência consistente para seu aplicativo. No entanto, pode ser necessário personalizá-lo ainda mais para atender às suas necessidades e preferências específicas.
Conclusão
Neste artigo, você aprendeu como criar uma barra de progresso de download de arquivo no Angular 8 usando três opções diferentes: usando um link HTML simples, usando HttpClient e RxJS e usando Angular Material Progress Bar.Você também aprendeu os prós e contras de cada opção e algumas práticas recomendadas para criar uma barra de progresso de download de arquivo no Angular 8.
Aqui está um resumo dos principais pontos e comparação das opções:
Opção Prós Contras --- --- --- Link HTML Simples e padrão Sem indicador de progresso ou controle HttpClient e RxJS Mais controle e personalização Mais código e complexidade Barra de Progresso de Material Angular Pronto e consistente Menos flexibilidade e customização Dependendo de seus requisitos e preferências, você pode escolher qualquer uma dessas opções para criar uma barra de progresso de download de arquivo no Angular 8. No entanto, algumas recomendações gerais e práticas recomendadas são:
Use nomes de arquivos e URLs descritivos para seus downloads
Use tipos MIME apropriados e cabeçalhos de disposição de conteúdo para seus downloads
Use HTTPS para downloads seguros
Lidar com erros e exceções graciosamente
Teste seus downloads em diferentes navegadores e dispositivos
perguntas frequentes
Como cancelo um download de arquivo no Angular?
Se você estiver usando HttpClient e RxJS para baixar um arquivo, poderá cancelar o download cancelando a assinatura do Observable retornado pela solicitação GET. Isso abortará o XMLHttpRequest subjacente e interromperá o download.
Como retomo um download de arquivo no Angular?
Se você estiver usando HttpClient e RxJS para baixar um arquivo, poderá retomar um download parcial usando o cabeçalho Range em sua solicitação GET. Este cabeçalho especifica o intervalo de bytes do arquivo que você deseja baixar. Por exemplo, se você baixou 50% de um arquivo de 100 MB, pode retomar o download do byte 50.000.001 para o byte 100.000.000 definindo o cabeçalho Range como bytes=50000001-100000000 Se você estiver usando HttpClient e RxJS para baixar um arquivo, poderá retomar um download parcial usando o cabeçalho Range em sua solicitação GET. Este cabeçalho especifica o intervalo de bytes do arquivo que você deseja baixar.Por exemplo, se você baixou 50% de um arquivo de 100 MB, pode retomar o download do byte 50.000.001 para o byte 100.000.000 definindo o cabeçalho Range como bytes=50000001-100000000.
No entanto, isso requer que o servidor suporte o cabeçalho Range e retorne uma resposta 206 Partial Content com o cabeçalho Content-Range indicando o intervalo de bytes do conteúdo parcial. Nem todos os servidores oferecem suporte a esse recurso, portanto, talvez seja necessário verificar os recursos do servidor antes de retomar o download.
Como faço upload de um arquivo no Angular?
Se você quiser fazer upload de um arquivo no Angular, pode usar o serviço HttpClient novamente, mas desta vez com uma solicitação POST ou PUT em vez de uma solicitação GET. Você também precisa usar um objeto FormData para anexar os dados do arquivo e quaisquer outros parâmetros que deseja enviar ao servidor. Por exemplo, você pode fazer upload de um arquivo como este:
importar HttpClient de '@angular/common/http'; constructor(private http: HttpClient) uploadFile(file: File) const formData = new FormData(); formData.append('arquivo', arquivo, arquivo.nome); formData.append('otherParam', 'someValue'); return this.http.post('/uploads', formData);
Isso retornará um Observable que você pode assinar e obter a resposta do servidor. Você também pode usar as opções reportProgress e observe para obter os eventos de progresso de upload, semelhantes aos eventos de progresso de download.
Como faço para testar um download de arquivo no Angular?
Se você deseja testar um download de arquivo em Angular, pode usar ferramentas como Jasmine e Karma para escrever testes de unidade e testes de ponta a ponta para seus componentes e serviços que lidam com downloads de arquivos. Você também pode usar ferramentas como Protractor e Cypress para automatizar as interações do navegador e simular ações do usuário, como clicar em links ou botões de download.
No entanto, testar downloads de arquivos pode ser desafiador porque diferentes navegadores lidam com downloads de maneira diferente e podem não expor o status ou os eventos do download ao JavaScript.Pode ser necessário usar algumas soluções alternativas ou dados fictícios para testar a funcionalidade de download de arquivo. Por exemplo, você pode usar métodos spyOn ou stub de Jasmine ou Sinon.js para zombar do serviço HttpClient ou da função saveAs e verificar se eles são chamados com os argumentos corretos. Você também pode usar URLs Blob ou URLs de dados em vez de URLs reais para criar arquivos fictícios para teste.
Como crio uma barra de progresso de download de arquivo personalizada no Angular?
Se nenhuma das opções mencionadas acima atender às suas necessidades ou preferências, você sempre poderá criar sua própria barra de progresso de download de arquivo personalizada no Angular. Você pode usar HTML, CSS e JavaScript para criar qualquer design ou animação que desejar para sua barra de progresso. Você também pode usar as diretivas, componentes, canais e serviços do Angular para tornar sua barra de progresso reutilizável, configurável e interativa.
Por exemplo, você pode criar um componente de barra de progresso personalizado que obtém um valor de entrada para a porcentagem do progresso e o exibe em uma forma circular com algum texto e ícones. Você pode usar esse componente em seu modelo sempre que desejar mostrar uma barra de progresso de download de arquivo. Você também pode usar ChangeDetectionStrategy e ChangeDetectorRef do Angular para otimizar o desempenho de seu componente e evitar ciclos de detecção de alterações desnecessários. 0517a86e26
Comments