Como fazer uma barra de progresso de download no React
Você já se perguntou como mostrar uma barra de progresso de download em seu aplicativo React? Uma barra de progresso de download é um recurso útil que pode aprimorar a experiência do usuário e fornecer feedback sobre o status do download de um arquivo. Neste tutorial, aprenderemos como criar uma barra de progresso de download simples, mas eficaz, no React usando o Axios, uma biblioteca popular para fazer solicitações HTTP.
download progress bar react
O Axios nos permite rastrear o progresso de um download de arquivo usando a opção onDownloadProgress, que recebe uma função de retorno de chamada que recebe um objeto de evento de progresso. Este objeto contém informações como o número de bytes carregados e o tamanho total da requisição. A partir disso, podemos calcular a porcentagem do progresso do download e atualizar o estado e a IU de acordo. Também usaremos ganchos do React para gerenciar as mudanças de estado e lidar com erros e mensagens de sucesso.
No final deste tutorial, você terá uma barra de progresso de download funcionando, mais ou menos assim:
Configurando o projeto
Para começar, precisamos configurar um projeto React usando create-react-app, uma ferramenta que nos permite criar um aplicativo React com configuração mínima. Para fazer isso, abra seu terminal e execute o seguinte comando:
npm create-react-app react-download-progress-bar
Isso criará uma nova pasta chamada react-download-progress-bar com todos os arquivos e dependências necessários. Em seguida, precisamos instalar o Axios, que usaremos para fazer solicitações HTTP. Para fazer isso, execute o seguinte comando dentro da pasta do projeto:
npm instalar axios
Agora estamos prontos para começar a codificar. Abra seu editor de código favorito e navegue até a pasta src. Aqui você encontrará um arquivo chamado App.js, que é o principal componente do nosso aplicativo. Substituiremos seu conteúdo por nosso próprio código.
Primeiro, vamos importar React e Axios na parte superior do arquivo:
importar Reagir de 'reagir'; importar axios de 'axios';
Em seguida, vamos adicionar alguns estilos CSS para nosso botão de download e nossa barra de progresso. Usaremos variáveis CSS para controlar algumas propriedades como cor, largura e altura dos elementos. Você pode colar esses estilos dentro do arquivo App.css ou usar estilos embutidos se preferir:
.botão de progresso posição: relativa; exibição: flexível; itens de alinhamento: centro; justificar-conteúdo: centro; largura: 300px; altura: 80px; .download-button posição: absoluta; largura: var(--botão-largura); altura: var(--botão-altura); borda: nenhum; border-radius: var(--button-height); cor de fundo: var(--cor do botão); cor branca; tamanho da fonte: var(--tamanho da fonte); .loading-text posição: absoluta; opacidade: 0; cor branca; tamanho da fonte: var(--tamanho da fonte); .percentage posição: absoluta; cor branca; tamanho da fonte: var(--tamanho da fonte); .in-progress .download-button largura: var(--progress-width); .in-progress .loading-text opacidade: 1; .concluído .download-button largura: var(--button-width); .finished .percentage opacidade: 0; /* Variáveis CSS */ :root --button -width: 300px; --altura do botão: 80px; --cor do botão: #2196f3; --progress-width: calc(var(--button-width) * var(--progress)); --tamanho da fonte: 24px;
Como você pode ver, temos quatro classes para nossos elementos: botão de progresso, botão de download, texto de carregamento e porcentagem. Também temos duas classes modificadoras: em andamento e finalizada, que usaremos para alterar a aparência dos elementos com base no estado do download. A classe do botão de progresso é o contêiner para todos os outros elementos. A classe do botão de download é o botão real no qual o usuário pode clicar para iniciar o download. A classe loading-text é o texto que mostra "Carregando..." quando o download está em andamento. A classe de porcentagem é o texto que mostra a porcentagem do andamento do download.
Agora vamos criar nosso componente React e adicionar algum estado inicial e UI.Usaremos ganchos do React para gerenciar as mudanças de estado e lidar com os eventos. Utilizaremos quatro variáveis de estado: progress, que armazenará a porcentagem do andamento do download; inProgress, que indicará se o download está em andamento ou não; terminado, que indicará se o download foi finalizado ou não; e error, que armazenará qualquer mensagem de erro que possa ocorrer durante o download. Também usaremos uma constante chamada fileUrl, que armazenará a URL do arquivo que queremos baixar. Para este tutorial, usaremos um arquivo PDF de amostra da Wikipédia, mas você pode usar qualquer arquivo que desejar.
function App() // Variáveis de estado const [progress, setProgress] = React.useState(0); const [inProgress, setInProgress] = React.useState(false); const [concluído, setFinished] = React.useState(false); const [erro, setError] = React.useState(nulo); // URL do arquivo const fileUrl = " // Elementos da IU retornam (
Download
Carregando...
progresso%
erro && erro
);
Aqui criamos um componente de função chamado App, que retorna um elemento JSX que contém nossos elementos de interface do usuário. Temos um div com o botão de progresso da classe, que contém um botão com o botão de download da classe, um span com o texto de carregamento da classe e outro span com a porcentagem da classe. Também temos uma renderização condicional de um elemento p com a classe error, que mostrará qualquer mensagem de erro que possa ocorrer durante o download. Também adicionamos alguma lógica para alterar os nomes de classe do botão com base nas variáveis de estado inProgress e terminado. Por fim, adicionamos um manipulador de eventos onClick ao botão, que chamará uma função chamada download quando o usuário clicar nele.
Implementando a função de download
Agora vamos implementar a função de download que tratará do download real do arquivo usando o Axios.Usaremos o Axios para fazer uma solicitação GET para a URL do arquivo com algumas opções, como responseType e onDownloadProgress. A opção responseType informa ao Axios que tipo de dados esperamos receber do servidor. Nesse caso, queremos receber um blob, que é uma representação binária dos dados do arquivo. A opção onDownloadProgress recebe uma função de retorno de chamada que recebe um objeto de evento de progresso, que contém informações como carregado e total. A propriedade Loaded nos diz quantos bytes foram baixados até agora, e a propriedade total nos diz quantos bytes devem ser baixados no total. A partir dessas propriedades, podemos calcular a porcentagem do progresso do download usando esta fórmula:
porcentagem constante = Math.round((carregado * 100) / total);
Podemos então usar esse valor percentual para atualizar nosso estado e interface do usuário usando ganchos React. Usaremos setProgress para atualizar a variável de estado de progresso, setInProgress para atualizar a variável de estado inProgress e setFinished para atualizar a variável de estado finalizado. Também usaremos setError para atualizar a variável de estado de erro caso ocorra algum erro durante o download.
Aqui está como nossa função de download se parece:
function download() // Redefina o estado setProgress(0); setInProgress(verdadeiro); setConcluído(falso); setError(nulo); // Faça uma solicitação GET para a URL do arquivo axios .get(fileUrl, responseType: "blob", onDownloadProgress: (event) => // Calcula a porcentagem do progresso do download const percent = Math.round((event.loaded * 100) / event.total); // Atualiza o estado e a interface do usuário setProgress(percentage); , ) .then((response) => // Cria uma URL para o blob object const url = window.URL.createObjectURL(new Blob([response.data])); // Cria um elemento link e define seus atributos const link = document.createElement("a"); link.href = url; link.setAttribute("download", "file.pdf"); // Anexa o link ao corpo do documento e clica nele document.body.appendChild(link); link.click(); // Remove o link do corpo do documento document.body.removeChild(link ); // Atualiza o estado e a interface do usuário setInProgress(false); setFinished(true); ) .catch((error) => // Atualiza o estado e a interface do usuário setInProgress(false); setError(erro.mensagem); );
Como você pode ver, usamos o Axios para fazer uma solicitação GET para a URL do arquivo com algumas opções. Usamos um método then para lidar com a resposta bem-sucedida e um método catch para lidar com qualquer erro. No método then, criamos uma URL para o objeto blob usando window.URL.createObjectURL, que cria uma URL temporária que aponta para o objeto blob. Em seguida, criamos um elemento de link e definimos seu atributo href para o URL do blob e seu atributo de download para o nome do arquivo. Em seguida, anexamos o link ao corpo do documento e clicamos nele, o que acionará o navegador para baixar o arquivo. Em seguida, removemos o link do corpo do documento e atualizamos nosso estado e interface do usuário de acordo.No método catch, simplesmente atualizamos nosso estado e interface do usuário com a mensagem de erro.
Conclusão
Neste tutorial, aprendemos como fazer uma barra de progresso de download no React usando o Axios. Vimos como usar o Axios para rastrear o progresso de um download de arquivo usando onDownloadProgress e como atualizar nosso estado e interface do usuário usando ganchos do React. Também vimos como criar um URL de blob e um elemento de link para baixar o arquivo do navegador.
Esta é uma maneira simples, mas eficaz, de mostrar uma barra de progresso de download em seu aplicativo React, mas existem algumas melhorias e extensões possíveis que você pode tentar. Por exemplo, você pode:
Use arquivos ou URLs diferentes para fins de teste
Personalize a aparência da barra de progresso usando CSS ou outras bibliotecas
Baixe vários arquivos de uma só vez usando Promise.all ou async/await
Teste o desempenho da função de download usando ferramentas como o Chrome DevTools
Esperamos que você tenha gostado deste tutorial e aprendido algo novo. Se você tiver alguma dúvida ou feedback, sinta-se à vontade para deixar um comentário abaixo.
perguntas frequentes
O que é Axios e como funciona?
Axios é uma biblioteca popular para fazer solicitações HTTP em JavaScript. Ele funciona tanto no navegador quanto no Node.js e oferece suporte a recursos como promessas, interceptadores, cancelamento, eventos de progresso e muito mais. O Axios funciona criando uma instância de XMLHttpRequest (no navegador) ou http (no Node.js) e enviando solicitações usando vários métodos, como get, post, put, delete etc. O Axios também fornece alguns auxiliares úteis e padrões que facilitam o trabalho com solicitações HTTP.
O que são hooks do React e por que eles são úteis?
Os ganchos do React são funções que permitem usar o estado e outros recursos do React sem escrever um componente de classe. Eles permitem que você escreva um código mais conciso e funcional e evite algumas armadilhas comuns de componentes de classe, como esta associação, métodos de ciclo de vida e herança. Alguns dos ganchos integrados são useState, useEffect, useRef, useContext, useReducer, etc.Você também pode criar seus próprios ganchos personalizados combinando outros ganchos.
Como posso personalizar a aparência da barra de progresso?
Você pode personalizar a aparência da barra de progresso usando CSS ou outras bibliotecas que fornecem componentes ou estilos prontos para barras de progresso. Por exemplo, você pode usar Bootstrap, Material-UI, Ant Design, etc. Você também pode usar animações ou transições CSS para adicionar alguns efeitos ou transições à barra de progresso.
Como posso baixar vários arquivos de uma só vez?
Você pode baixar vários arquivos de uma só vez usando Promise.all ou async/await para lidar com várias solicitações simultaneamente. Promise.all pega uma matriz de promessas e retorna uma única promessa que resolve quando todas elas são cumpridas ou rejeita quando alguma delas falha. async/await permite escrever código assíncrono de maneira síncrona usando await palavra-chave para pausar a execução até que uma promessa seja resolvida ou rejeitada. Por exemplo, você pode escrever algo assim: função async downloadAll() // Uma matriz de URLs de arquivos const fileUrls = [ " " " 6Medium.pdf", ]; // Uma matriz de promessas const promessas = fileUrls.map((fileUrl) => axios.get(fileUrl, responseType: "blob" )); // Espera que todas as promessas sejam resolvidas const answers = await Promise.all(promises); // Percorra as respostas e baixe os arquivos answers.forEach((response, index) => // Crie uma URL para o objeto blob const url = window.URL.createObjectURL(new Blob([response.data])); // Crie um elemento link e defina seus atributos const link = document.createElement("a"); link.href = url; link.setAttribute("download", `file$index + 1.pdf`); // Anexe o link para o corpo do documento e clique nele document.body.appendChild(link); link.click(); // Remove o link do corpo do documento document.body.removeChild(link); );
Esta função fará o download de todos os arquivos na matriz fileUrls de uma só vez e os salvará como arquivo1.pdf, arquivo2.pdf e arquivo3.pdf. Você pode chamar essa função no manipulador de eventos onClick do botão de download em vez da função de download.
Como posso testar o desempenho da função de download?
Você pode testar o desempenho da função de download usando ferramentas como Chrome DevTools, que fornecem vários recursos e métricas para medir e analisar o desempenho do seu aplicativo da web. Por exemplo, você pode usar o painel Network para monitorar a atividade da rede e ver quanto tempo leva para baixar o arquivo, quantos dados são transferidos, qual é o código de status etc.Você também pode usar ferramentas como Lighthouse ou WebPageTest para auditar e comparar seu aplicativo da web com as melhores práticas e padrões. 0517a86e26
Comments