Como Baixar um Arquivo Local no React.js (2023)

Para realizar o download de um arquivo no React.js, siga os passos abaixo:

Importe o Arquivo

Importe o arquivo que deseja baixar para o seu componente.

import ExamplePdf from './example.pdf';

Crie um Botão em um Elemento <a>

Envolve um botão em um elemento <a> e configure as propriedades href e download no elemento <a>.

<a href={ExamplePdf} download="Exemplo-documento-PDF" target="_blank" rel="noreferrer">
  <button>Download do arquivo .pdf</button>
</a>

O arquivo será baixado quando o botão for clicado. Certifique-se de ajustar o nome do arquivo e o caminho conforme necessário.

Utilizando o Componente React Router Link

Se estiver usando o componente React Router Link, substitua a propriedade href por to.

import { Link } from 'react-router-dom';

<Link to={ExamplePdf} download="Exemplo-documento-PDF" target="_blank" rel="noreferrer">
  Download do arquivo
</Link>

Download do Arquivo com Sintaxe require()

Caso enfrente problemas ao importar o arquivo, utilize a sintaxe require() inline.

<a href={require('./example.pdf')} download="Exemplo-documento-PDF" target="_blank" rel="noreferrer">
  <button>Download do arquivo .pdf</button>
</a>

Download de um Arquivo na Pasta public/

Se o arquivo estiver na pasta public/, ajuste o caminho conforme necessário.

<a href="/example.pdf" download="Exemplo-documento-PDF" target="_blank" rel="noreferrer">
  <button>Download do arquivo .pdf</button>
</a>

Criando um Elemento <a> Programaticamente

Baixe um arquivo criando dinamicamente um elemento <a> quando o botão é clicado.

const handleDownload = () => {
  const link = document.createElement('a');
  link.download = 'Exemplo-Arquivo-PDF';
  link.href = ExamplePdf;
  link.click();
};

<button onClick={handleDownload}>Download do arquivo</button>

Usando Material UI para Estilizar o Botão de Download

Integre o Material UI para adicionar estilo ao botão de download.

import Button from '@mui/material/Button';

<Button onClick={handleDownload} variant="contained">
  Download do arquivo
</Button>

Download de um Arquivo de uma URL Externa

Baixe um arquivo de uma URL externa, considerando configurações CORS.

const downloadFile = (filePath, fileName = 'Exemplo-Arquivo-PDF.pdf') => {
  fetch('https://cors-anywhere.herokuapp.com/' + filePath, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/pdf',
    },
  })
    .then(response => response.blob())
    .then(blob => {
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement('a');
      link.href = url;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    });
};

<button onClick={() => downloadFile('example-pdf-file.pdf')}>
  Download do arquivo
</button>

Certifique-se de configurar corretamente as permissões CORS ao fazer uma solicitação HTTP para uma origem diferente. O exemplo acima assume que o arquivo PDF está na mesma estrutura de pastas do App.js.

Com estas instruções, você pode eficientemente realizar downloads de arquivos em aplicações React.js, garantindo uma experiência positiva para os usuários.