Это не связано с React. Однако вы можете использовать атрибут download в элементе привязки <a>, чтобы указать браузеру загрузить файл.

<a href='/somefile.txt' download>Click to download</a>

Это поддерживается не во всех браузерах: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Запускать загрузку браузера из внешнего интерфейса ненадежно.

Что вам нужно сделать, так это создать конечную точку, которая при вызове будет предоставлять правильные заголовки ответов, тем самым инициируя загрузку браузера.

Фронтенд-код может не так много. Например, атрибут «загрузка» может просто открыть файл в новой вкладке в зависимости от браузера.

Заголовки ответов, на которые вам нужно обратить внимание, вероятно, это Content-Type и Content-Disposition. Вы должны проверить этот отвечать для более подробного объяснения.

браузеры достаточно умны, чтобы обнаруживать ссылку и загружать ее напрямую при нажатии на тег привязки без использования атрибута загрузки.

после получения ссылки на файл из api просто используйте простой javascript, создав тег привязки, и удалите его после динамического щелчка сразу на лету.

const link = document.createElement('a');
link.href = `your_link.pdf`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

Если вы используете React Router, используйте это:

<Link to = "/files/myfile.pdf" target = "_blank" download>Download</Link>

Где /files/myfile.pdf находится внутри вашей папки public.

Вы можете определить компонент и использовать его где угодно.

import React from 'react';
import PropTypes from 'prop-types';


export const DownloadLink = ({ to, children, ...rest }) => {

  return (
    <a
      {...rest}
      href = {to}
      download
    >
      {children}
    </a>
  );
};


DownloadLink.propTypes = {
  to: PropTypes.string,
  children: PropTypes.any,
};

export default DownloadLink;

React создает проблему безопасности при использовании тега a с target = "_blank".

Мне удалось заставить его работать вот так:

<a href = {uploadedFileLink} target = "_blank" rel = "noopener noreferrer" download>
   <Button>
      <i className = "fas fa-download"/>
      Download File
   </Button>
</a>

Вот как я это сделал в React:

import MyPDF from '../path/to/file.pdf';
<a href = {myPDF} download = "My_File.pdf"> Download Here </a>

Важно переопределить имя файла по умолчанию с помощью download = "name_of_file_you_want.pdf", иначе файл получит хэш-номер, прикрепленный к нему при загрузке.

У меня точно такая же проблема, и вот решение, которым я сейчас пользуюсь: (Заметьте, мне это кажется идеальным, потому что он сохраняет файлы, тесно связанные с приложением SinglePageApplication React, которое загружается из Amazon S3. Таким образом, это похоже на хранение на S3 и в приложении, которое знает, где оно находится в S3, относительно говоря .

Шаги

3 шага:

1. Используйте файловую заставку в проекте: npmjs / пакет / хранитель файлов (npm install file-saver или что-то в этом роде)
2. Поместите файл в свой проект Вы говорите, что это в папке компонентов. Что ж, есть вероятность, что если у вас есть веб-пакет, он попытается его минимизировать. (Кто-нибудь, пожалуйста, укажите, что веб-пакет будет делать с файлом ресурсов в папке компонентов), и поэтому я не думаю, что это то, что вам нужно. . Итак, я предлагаю поместить актив в папку public под именем resource или asset. Webpack не касается папки public и index.html, и ваши ресурсы копируются в производственную сборку как есть, где вы можете ссылаться на них, как показано на следующем шаге.
3. Обратитесь к файлу в вашем проекте Пример кода:

   import FileSaver from 'file-saver';
   FileSaver.saveAs(
       process.env.PUBLIC_URL + "/resource/file.anyType",
       "fileNameYouWishCustomerToDownLoadAs.anyType");
   

Источник

• Create-React-App.dev | Использование общей папки
• Github | Документация по хранению файлов

Приложение

• Я также пробую Link компонент react-routerReact-router-docs / Ссылка. ZIP-файл загрузился и каким-то образом распаковался должным образом. Как правило, ссылки имеют синий цвет, чтобы унаследовать родительскую цветовую схему, просто добавьте опору, например: style = {color: inherit}, или просто назначьте класс своей библиотеки CSS, например button button-primary или что-то в этом роде, если вы Bootstrappin '
• Другие мудрые вопросы, с которыми он тесно связан:
  • скачать файл в React
  • как скачать файл в React JS
  • кнопка для загрузки файла в responseJS
  • загрузить образец файла в общую папку (отреагировать)

Вы можете использовать FileSaver.js для достижения этой цели:

const saveFile = () => {
fileSaver.saveAs(
  process.env.REACT_APP_CLIENT_URL + "/resources/cv.pdf",
  "MyCV.pdf"
);

};

<button className = "cv" onClick = {saveFile}>
    Download File
</button>

tldr; получить файл с URL-адреса, сохранить его как локальный Blob, вставить элемент ссылки в DOM и щелкнуть его, чтобы загрузить Blob

У меня был файл PDF, который хранился в S3 за URL-адресом Cloudfront. Я хотел, чтобы пользователь мог нажать кнопку и немедленно инициировать загрузку, не открывая новую вкладку с предварительным просмотром PDF. Как правило, если файл размещен по URL-адресу, домен которого отличается от домена, на котором в настоящее время находится пользователь, немедленная загрузка блокируется многими браузерами из соображений безопасности пользователя. Если вы используете это решение, не инициирует загрузку файла, если пользователь не нажимает кнопку для преднамеренной загрузки.

Чтобы справиться с этим, мне нужно было получить файл по URL-адресу, обойдя любые политики CORS, чтобы сохранить локальный Blob-объект, который затем стал бы источником загруженного файла. В приведенном ниже коде убедитесь, что вы заменили свои собственные fileURL, Content-Type и FileName.

fetch('https://cors-anywhere.herokuapp.com/' + fileURL, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/pdf',
    },
  })
  .then((response) => response.blob())
  .then((blob) => {
    // Create blob link to download
    const url = window.URL.createObjectURL(
      new Blob([blob]),
    );
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute(
      'download',
      `FileName.pdf`,
    );

    // Append to html link element page
    document.body.appendChild(link);

    // Start download
    link.click();

    // Clean up and remove the link
    link.parentNode.removeChild(link);
  });

Это решение ссылается на решения получение большого двоичного объекта из URL-адреса и с использованием прокси-сервера CORS.

Обновлять Начиная с 31 января 2021 г., демонстрация cors -where, размещенная на серверах Heroku, разрешает только ограниченное использование в целях тестирования и не может использоваться для производственных приложений. Вам нужно будет разместить свой собственный сервер cors -where, следуя корс везде или корс-сервер.

Решение (Идеально подходит для React JS, Next JS)

Вы можете использовать js-файл-загрузка, и это мой пример:

import axios from 'axios'
import fileDownload from 'js-file-download'
 
...

handleDownload = (url, filename) => {
  axios.get(url, {
    responseType: 'blob',
  })
  .then((res) => {
    fileDownload(res.data, filename)
  })
}
 
...

<button onClick = {() => {this.handleDownload('https://your-website.com/your-image.jpg', 'test-download.jpg')
}}>Download Image</button>

Этот плагин может загружать Excel и другие типы файлов.

Мы можем использовать компонент response-download-link для загрузки контента в виде файла.

<DownloadLink
label = "Download"
filename = "fileName.txt"
exportFile = {() => "Client side cache data here…"}/>

https://frugalisminds.com/how-to-download-file-in-react-js-react-download-link/

Скачать файл

Для загрузки вы можете использовать несколько способов, как описано выше, кроме того, я также предоставлю свою стратегию для этого сценария.

1. npm install --save react-download-link
2. import DownloadLink from "react-download-link";
3. Ссылка для загрузки React для данных кеша на стороне клиента

   <DownloadLink 
       label = "Download" 
       filename = "fileName.txt"
       exportFile = {() => "Client side cache data here…"}
   />
   

4. Ссылка для скачивания данных кеша на стороне клиента с помощью обещаний

   <DownloadLink
       label = "Download with Promise"
       filename = "fileName.txt"
       exportFile = {() => Promise.resolve("cached data here …")}
   />
   

5. Ссылка для загрузки данных из URL-адреса с функцией обещаний для извлечения данных из URL-адреса

    getDataFromURL = (url) => new Promise((resolve, reject) => {
       setTimeout(() => {
           fetch(url)
               .then(response => response.text())
               .then(data => {
                   resolve(data)
               });
       });
   }, 2000);
   

6. Компонент DownloadLink вызывает функцию Fetch

   <DownloadLink
         label=”Download”
         filename=”filename.txt”
         exportFile = {() => Promise.resolve(this. getDataFromURL (url))}
   />
   

Удачного кодирования! ;)

fetchFile(){
  axios({
        url: `/someurl/thefiles/${this.props.file.id}`,
        method: "GET",
        headers: headers,
        responseType: "blob" // important
    }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute(
            "download",
            `${this.props.file.name}.${this.props.file.mime}`
        );
        document.body.appendChild(link);
        link.click();
    });
}
render(){
  return( <button onClick = {this.fetchFile}> Download file </button>)
}