如何下载fetch响应作为文件 [英] How to download fetch response in react as file
问题描述
以下是 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;
})
}
});
}
返回的回复是 .xlsx
文件。我希望用户能够将其保存为文件,但没有任何反应。我假设服务器正在返回正确类型的响应,因为在控制台中它说
The returned response is an .xlsx
file. I want the user to be able to save it as a file, but nothing happens. I assume the server is returning the right type of response because in the console it says
Content-Disposition:attachment; filename="report.xlsx"
我错过了什么?我应该在reducer中做什么?
What I'm I missing? What should I do in the reducer?
推荐答案
浏览器技术目前不支持直接从Ajax请求下载文件。解决方法是添加隐藏的表单并在幕后提交,以使浏览器触发保存对话框。
Browser technology currently doesn't support downloading a file directly from an Ajax request. The work around is to add a hidden form and submit it behind the scenes to get the browser to trigger the Save dialog.
我正在运行标准的Flux实现,所以我我不确定Redux(Reducer)代码应该是什么,但我刚为文件下载创建的工作流程就像这样...
I'm running a standard Flux implementation so I'm not sure what the exact Redux (Reducer) code should be, but the workflow I just created for a file download goes like this...
- 我有一个名为
FileDownload
的React组件。所有这个组件都会呈现一个隐藏的表单,然后在componentDidMount
内,立即提交表单并调用它的onDownloadComplete
prop 。 - 我有另一个React组件,我们称之为
Widget
,带有下载按钮/图标(实际上很多......一个表中的每个项目)。小部件
具有相应的操作和存储文件。小部件
导入FileDownload
。 -
Widget
有两种与下载相关的方法:handleDownload
和handleDownloadComplete
。 -
Widget
store有一个名为downloadPath
的属性。默认情况下,它设置为null
。当它的值设置为null
时,没有正在进行的文件下载,并且Widget
组件不会呈现FileDownload
组件。 - 点击
Widget
中的按钮/图标调用handleDownload
触发downloadFile
操作的方法。downloadFile
操作不会发出Ajax请求。它将DOWNLOAD_FILE
事件发送到商店,并随之发送downloadPath
以供下载文件。商店保存downloadPath
并发出更改事件。 - 因为现在有
downloadPath
,小部件
将呈现FileDownload
传递必要的道具,包括downloadPath
以及handleDownloadComplete
方法作为onDownloadComplete
的值。 - 当呈现
FileDownload
时,表单以method =GET
提交(POST也应该有效) )和action = {downloadPath}
,服务器响应现在将触发浏览器的目标下载文件的保存对话框(在IE 9/10中测试,最新的Firefox和Chrome)。 - 在表单提交后,立即调用
onDownloadComplete
/handleDownloadComplete
。这会触发另一个调度DOWNLOAD_FILE
事件的操作。但是,这次downloadPath
设置为null
。商店将downloadPath
保存为null
并发出更改事件。 - 由于不再有
downloadPath
,FileDownload
组件未在Widget中呈现
世界是个幸福的地方。
- I have a React component called
FileDownload
. All this component does is render a hidden form and then, insidecomponentDidMount
, immediately submit the form and call it'sonDownloadComplete
prop. - I have another React component, we'll call it
Widget
, with a download button/icon (many actually... one for each item in a table).Widget
has corresponding action and store files.Widget
importsFileDownload
. Widget
has two methods related to the download:handleDownload
andhandleDownloadComplete
.Widget
store has a property calleddownloadPath
. It's set tonull
by default. When it's value is set tonull
, there is no file download in progress and theWidget
component does not render theFileDownload
component.- Clicking the button/icon in
Widget
calls thehandleDownload
method which triggers adownloadFile
action. ThedownloadFile
action does NOT make an Ajax request. It dispatches aDOWNLOAD_FILE
event to the store sending along with it thedownloadPath
for the file to download. The store saves thedownloadPath
and emits a change event. - Since there is now a
downloadPath
,Widget
will renderFileDownload
passing in the necessary props includingdownloadPath
as well as thehandleDownloadComplete
method as the value foronDownloadComplete
. - When
FileDownload
is rendered and the form is submitted withmethod="GET"
(POST should work too) andaction={downloadPath}
, the server response will now trigger the browser's Save dialog for the target download file (tested in IE 9/10, latest Firefox and Chrome). - Immediately following the form submit,
onDownloadComplete
/handleDownloadComplete
is called. This triggers another action that dispatches aDOWNLOAD_FILE
event. However, this timedownloadPath
is set tonull
. The store saves thedownloadPath
asnull
and emits a change event. - Since there is no longer a
downloadPath
theFileDownload
component is not rendered inWidget
and the world is a happy place.
Widget.js - 仅限部分代码
Widget.js - partial code only
import FileDownload from './FileDownload';
export default class Widget extends Component {
constructor(props) {
super(props);
this.state = widgetStore.getState().toJS();
}
handleDownload(data) {
widgetActions.downloadFile(data);
}
handleDownloadComplete() {
widgetActions.downloadFile();
}
render() {
const downloadPath = this.state.downloadPath;
return (
// button/icon with click bound to this.handleDownload goes here
{downloadPath &&
<FileDownload
actionPath={downloadPath}
onDownloadComplete={this.handleDownloadComplete}
/>
}
);
}
widgetActions.js - 仅限部分代码
widgetActions.js - partial code only
export function downloadFile(data) {
let downloadPath = null;
if (data) {
downloadPath = `${apiResource}/${data.fileName}`;
}
appDispatcher.dispatch({
actionType: actionTypes.DOWNLOAD_FILE,
downloadPath
});
}
widgetStore.js - 仅限部分代码
widgetStore.js - partial code only
let store = Map({
downloadPath: null,
isLoading: false,
// other store properties
});
class WidgetStore extends Store {
constructor() {
super();
this.dispatchToken = appDispatcher.register(action => {
switch (action.actionType) {
case actionTypes.DOWNLOAD_FILE:
store = store.merge({
downloadPath: action.downloadPath,
isLoading: !!action.downloadPath
});
this.emitChange();
break;
FileDownload.js
- 完整,功能齐全的代码可供复制和粘贴使用
- 与Babel 6.x反应0.14.7 [es2015,反应,阶段0]
- 表格需要 display:none
这是隐藏的 className
用于
FileDownload.js
- complete, fully functional code ready for copy and paste
- React 0.14.7 with Babel 6.x ["es2015", "react", "stage-0"]
- form needs to be display: none
which is what the "hidden" className
is for
import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';
function getFormInputs() {
const {queryParams} = this.props;
if (queryParams === undefined) {
return null;
}
return Object.keys(queryParams).map((name, index) => {
return (
<input
key={index}
name={name}
type="hidden"
value={queryParams[name]}
/>
);
});
}
export default class FileDownload extends Component {
static propTypes = {
actionPath: PropTypes.string.isRequired,
method: PropTypes.string,
onDownloadComplete: PropTypes.func.isRequired,
queryParams: PropTypes.object
};
static defaultProps = {
method: 'GET'
};
componentDidMount() {
ReactDOM.findDOMNode(this).submit();
this.props.onDownloadComplete();
}
render() {
const {actionPath, method} = this.props;
return (
<form
action={actionPath}
className="hidden"
method={method}
>
{getFormInputs.call(this)}
</form>
);
}
}
这篇关于如何下载fetch响应作为文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!