Как скачать fetch response в react как файл

здесь код actions.js

export function exportRecordToExcel(record) {
    return ({fetch}) => ({
        type: EXPORT_RECORD_TO_EXCEL,
        payload: {
            promise: fetch('/records/export', {
                credentials: 'same-origin',
                method: 'post',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(data)
            }).then(function(response) {
                return response;
            })
        }
    });
}

возвращенный ответ . Я хочу, чтобы пользователь мог сохранить его как файл, но ничего не происходит. Я предполагаю, что сервер возвращает правильный тип ответа, потому что в консоли он говорит 

Content-Disposition:attachment; filename="report.xlsx"

что я упустил? Что мне делать в редукторе?

30
flux javascript reactjs reactjs-flux

2 ответов

технология браузера в настоящее время не поддерживает загрузку файла непосредственно из Ajax-запроса. Работа вокруг состоит в том, чтобы добавить скрытую форму и отправить ее за кулисы, чтобы браузер запустил диалог сохранения.

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

  1. у меня есть компонент React под названием FileDownload. Все этот компонент делает рендеринг скрытой формы, а затем внутри componentDidMount, немедленно отправьте форму и называем это onDownloadComplete проп.
  2. у меня есть еще один компонент React, мы назовем его Widget, с кнопкой загрузки / значком (многие на самом деле... по одному для каждого элемента таблицы). Widget имеет соответствующие действия и хранить файлы. Widget импорт FileDownload.
  3. Widget есть два метода, связанные с Скачать: handleDownload и handleDownloadComplete.
  4. Widget магазин свойство downloadPath. Он установлен в null по умолчанию. Когда его значение установлено в null, нет загрузки файла в процессе и Widget компонент не оказывает
40

вы можете использовать эти две библиотеки для загрузки файлов http://danml.com/download.html https://github.com/eligrey/FileSaver.js/#filesaverjs

пример

//  for FileSaver
import FileSaver from 'file-saver';
export function exportRecordToExcel(record) {
      return ({fetch}) => ({
        type: EXPORT_RECORD_TO_EXCEL,
        payload: {
          promise: fetch('/records/export', {
            credentials: 'same-origin',
            method: 'post',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
          }).then(function(response) {
            return response.blob();
          }).then(function(blob) {
            FileSaver.saveAs(blob, 'nameFile.zip');
          })
        }
      });

//  for download 
let download = require('./download.min');
export function exportRecordToExcel(record) {
      return ({fetch}) => ({
        type: EXPORT_RECORD_TO_EXCEL,
        payload: {
          promise: fetch('/records/export', {
            credentials: 'same-origin',
            method: 'post',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
          }).then(function(response) {
            return response.blob();
          }).then(function(blob) {
            download (blob);
          })
        }
      });
25