File download progress bar angular 6 - Como criar uma barra de progresso para o download de arquivos

Como criar uma barra de progresso de download de arquivo com Angular 6 e Material Design

O download de arquivos é uma tarefa comum para aplicativos da Web que precisam fornecer aos usuários acesso a vários tipos de dados, como PDFs, ZIPs, imagens ou vídeos. No entanto, baixar arquivos também pode ser uma experiência frustrante para os usuários se eles não souberem quanto tempo levará, quantos dados foram transferidos ou se houver algum erro ou interrupção. Para melhorar a experiência e a satisfação do usuário, é importante criar uma barra de andamento do download do arquivo que mostre o status e a porcentagem do download de forma clara e atrativa.

file download progress bar angular 6

Download: https://urlgoal.com/2vQL0Q

Neste artigo, mostrarei como criar uma barra de progresso de download de arquivo com Angular 6 e Material Design, usando o módulo HttpClient e o componente MatProgressBar. Também compartilharei algumas práticas recomendadas e exemplos de barras de progresso de download de arquivos no Angular 6 que você pode usar como inspiração para seus próprios projetos.

Pré-requisitos

Para acompanhar este artigo, você precisará das seguintes dependências e ferramentas:

• Angular CLI: uma ferramenta de interface de linha de comando que ajuda você a criar e gerenciar projetos Angular. Você pode instalá-lo globalmente com npm install -g @angular/cli.

• material angular: uma biblioteca de componentes de interface do usuário que implementa as diretrizes de design de materiais do Google para aplicativos Angular. Você pode instalá-lo com ng add @angular/material.

• RxJS: uma biblioteca para programação reativa que fornece observáveis, operadores e outros utilitários para trabalhar com fluxos de dados assíncronos. Já está incluído como uma dependência do Angular.

Você também precisará de um servidor que forneça alguns arquivos para download. Para este artigo, usarei , que oferece alguns arquivos de amostra de diferentes formatos e tamanhos.

Criando o serviço de download

A primeira etapa é criar um serviço que usa o módulo HttpClient para solicitar um arquivo de um servidor e acompanhar o andamento do download.O módulo HttpClient é um serviço Angular que fornece uma API simplificada para solicitações HTTP. Ele oferece suporte a várias opções e recursos, como interceptores, cabeçalhos, parâmetros, tipos de resposta, tratamento de erros e eventos de progresso.

Para criar um serviço de download, usaremos o comando Angular CLI ng gerar download do serviço. Isso irá gerar um arquivo chamado download.service.ts no origem/aplicativo pasta. Em seguida, adicionaremos algum código a este arquivo para implementar a seguinte lógica:

• Criar um Injetável decorator para marcar a classe como um serviço que pode ser injetado em outros componentes ou serviços.

• Crie um construtor que injeta uma instância de HttpClient como uma propriedade privada.

• Crie um método chamado Fazer download do arquivo que recebe uma string de URL como argumento e retorna um observável do tipo bolha. Um blob é um objeto semelhante a um arquivo de dados brutos imutáveis que podem representar qualquer tipo de dados, como imagens, áudio ou vídeo. O observable emitirá os dados blob quando o download for concluído ou um erro se o download falhar.

• Crie um método chamado getDownloadProgress que recebe uma string de URL como argumento e retorna um observável do tipo número. O observável emitirá a porcentagem do progresso do download, de 0 a 100, com base nos eventos de progresso emitidos pela solicitação HttpClient. O observável também será concluído quando o download for concluído ou erro se o download falhar.

O código para o serviço de download é mostrado abaixo:

@Injectable( fornecidoIn: 'root' ) classe de exportação DownloadService constructor(private http: HttpClient) downloadFile(url: string): Observable return this.http.get(url, responseType: 'blob'); getDownloadProgress(url: string): Observável

Como você pode ver, usamos o tipo de resposta opção para especificar que queremos receber um blob como resposta. Também usamos o relatarProgresso opção para habilitar o rastreamento de eventos de progresso, e o observar opção para obter o objeto de resposta completo em vez de apenas o corpo. Em seguida, usamos os operadores RxJS filtro e mapa para transformar os eventos de resposta em valores de progresso.

Criando o componente de download

A próxima etapa é criar um componente que use o componente MatProgressBar para exibir o andamento do download e o nome do arquivo. O componente MatProgressBar é um componente do Material Design que fornece uma barra horizontal para indicar o andamento de uma operação. Ele oferece suporte a vários modos, como determinado, indeterminado, buffer e consulta. Ele também suporta recursos de acessibilidade, como os atributos aria-label e aria-valuemin/valuemax/valuenow.

Para criar um componente de download, usaremos o comando Angular CLI ng gerar download do componente. Isso irá gerar quatro arquivos no src/app/download pasta: download.component.ts, download.component.html, download.component.css, e download.component.spec.ts. Em seguida, adicionaremos algum código a esses arquivos para implementar a seguinte lógica:

• Criar um @Entrada decorador para vincular uma propriedade chamada url do arquivo que receberá a URL do arquivo para download do componente pai.

• Crie um construtor que injete uma instância de DownloadService como uma propriedade privada.

• Crie duas propriedades chamadas nome do arquivo e progresso que armazenará o nome e a porcentagem do arquivo baixado.

• Crie um método chamado ngOnInit que será executado quando o componente for inicializado. Neste método, faremos o seguinte:

• Use o JavaScript para extrair o nome do arquivo do URL do arquivo e atribuí-lo ao nome do arquivo propriedade.

• Ligar para getDownloadProgress método de DownloadService com o URL do arquivo como argumento e assine seu observável. No retorno de chamada da assinatura, atribuiremos o valor do progresso ao progresso propriedade.

• Ligar para Fazer download do arquivo método de DownloadService com o URL do arquivo como argumento e assine seu observável. No callback da assinatura, usaremos o JavaScript para abrir uma nova janela com esse URL. Isso acionará o comportamento de download padrão do navegador e salvará o arquivo no dispositivo do usuário.

• Crie um arquivo de modelo que use o componente MatProgressBar para exibir o andamento do download e o nome do arquivo. Nós usaremos o modo atributo para definir o modo para determinado, o que significa que a barra de progresso mostrará um valor específico. Também usaremos o valor atributo para vincular o valor de progresso da classe de componente. Usaremos alguns estilos CSS para personalizar a aparência da barra de progresso e o nome do arquivo.

O código para o componente de download é mostrado abaixo:

// download.component.ts import Component, OnInit, Input from '@angular/core'; importar DownloadService de '../download.service'; @Component( selector: 'app-download', templateUrl: './download.component.html', styleUrls: ['./download.component.css'] ) classe de exportação DownloadComponent implementa OnInit @Input() fileUrl: string; nomeArquivo: string; progresso: número; constructor(private downloadService: DownloadService) ngOnInit(): void this.fileName = new URL(this.fileUrl).pathname.split('/').pop(); this.downloadService.getDownloadProgress(this.fileUrl).subscribe( progresso => this.progress = progresso; , error => console.error(error); ); this.downloadService.downloadFile(this.fileUrl).subscribe( blob => const blobUrl = URL.createObjectURL(blob); window.open(blobUrl); , error => console.error(error); );

// download.component.html fileName

// download.component.css .download-container largura: 300px; margem: 10px automático; .mat-progress-bar altura: 20px; .file-name text-align: center; intensidade da fonte: Negrito;

Testando o recurso de download

Para testar o recurso de download, precisamos usar o componente de download em um aplicativo e fornecer alguns URLs de arquivo como entradas. Para este artigo, usarei um componente de aplicativo simples que exibe uma lista de URLs de arquivo e seus formatos e tamanhos. O componente de aplicativo usará os componentes Angular Material MatList e MatListItem para criar uma lista de itens, cada um contendo um componente de download com um URL de arquivo como entrada.

Para criar um componente de aplicativo, usaremos o comando Angular CLI ng gerar aplicativo de componente. Isso irá gerar quatro arquivos no src/aplicativo/aplicativo pasta: app.component.ts, app.component.html, app.component.css, e app.component.spec.ts. Em seguida, adicionaremos algum código a esses arquivos para implementar a seguinte lógica:

• Crie um array de objetos chamado arquivos que contém alguns URLs de arquivo de amostra e seus formatos e tamanhos. Usaremos alguns dos arquivos de .

• Crie um arquivo de modelo que usa os componentes MatList e MatListItem para exibir a matriz de arquivos como uma lista de itens, cada um contendo um componente de download com um URL de arquivo como entrada. Também usaremos alguns estilos CSS para personalizar a aparência da lista e seus itens.

O código para o componente do aplicativo é mostrado abaixo:

// app.component.ts import Component de '@angular/core'; @Component( selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] ) export class AppComponent { files = [ url: ' formato: 'PDF', tamanho: '150 kB' , { url: ' -examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3', barra de progresso de download de arquivo com Angular 6 e Material Design, usando o módulo HttpClient e o componente MatProgressBar. Também compartilhei algumas práticas recomendadas e exemplos de barras de progresso de download de arquivos no Angular 6 que você pode usar como inspiração para seus próprios projetos. Criar uma barra de progresso de download de arquivo no Angular 6 é uma maneira útil e fácil de aprimorar a experiência do usuário e a satisfação de seus aplicativos da web. Usando observáveis, manipulação de erros e estilos personalizados, você pode criar uma barra de progresso de download de arquivo que seja responsiva, confiável e atraente. Você também pode explorar outros recursos e opções do módulo HttpClient e do componente MatProgressBar para criar barras de progresso de download de arquivo mais avançadas e personalizadas no Angular 6. Espero que tenha gostado deste artigo e aprendido algo novo. Se você tiver alguma dúvida ou feedback, sinta-se à vontade para deixar um comentário abaixo. Obrigado por ler! perguntas frequentes

Aqui estão algumas perguntas frequentes sobre as barras de progresso de download de arquivos no Angular 6:

• Como posso cancelar um download de arquivo no Angular 6?

Uma maneira de cancelar um download de arquivo no Angular 6 é usar o levar até operador cancelar a assinatura do observável quando uma determinada condição for atendida. Por exemplo, você pode criar um Assunto que emite um valor quando o usuário clica em um botão cancelar e, em seguida, usa o levar até operador para interromper o download quando esse valor for emitido. Você também pode usar o finalizar operador para executar algumas ações de limpeza quando o download for cancelado.

• Como posso retomar o download de um arquivo no Angular 6?

Uma maneira de retomar o download de um arquivo no Angular 6 é usar o Faixa cabeçalho para especificar o intervalo de bytes do arquivo que você deseja solicitar. Por exemplo, se você já baixou 50% de um arquivo de 10 MB, pode definir o Faixa cabeçalho para bytes=5000000- para solicitar a metade restante do arquivo. Você também pode usar o Intervalo de conteúdo cabeçalho para verificar o intervalo de bytes da resposta. Você precisará armazenar os bytes baixados e anexá-los aos bytes retomados para criar o arquivo completo.

• Como posso mostrar várias barras de progresso de download de arquivos no Angular 6?

Uma maneira de mostrar várias barras de progresso de download de arquivo no Angular 6 é usar uma matriz de objetos que contém as URLs de arquivo e seus valores de progresso. Você pode então usar o *ngFor diretiva para iterar sobre a matriz e criar um componente de download para cada item. Você também pode usar os operadores RxJS forkJoin, fundir, ou combineLatest para combinar vários observáveis de downloads de arquivos e acompanhar seu progresso.

• Como posso testar um recurso de download de arquivo no Angular 6?

Uma maneira de testar um recurso de download de arquivo no Angular 6 é usar um servidor fictício que forneça alguns arquivos de amostra para download. Você pode usar ferramentas como para escrever testes de unidade, testes de integração ou testes de ponta a ponta para seu recurso de download de arquivo.

• Como posso otimizar um recurso de download de arquivo no Angular 6?

Uma maneira de otimizar um recurso de download de arquivo no Angular 6 é usar técnicas de compactação para reduzir o tamanho dos arquivos que são transferidos pela rede. Você pode usar ferramentas como para agrupar e reduzir seu código e recursos para um carregamento mais rápido.

0517a86e26