React 下载功能【导出】实现
【Get请求接口】
通过Get是比较容易下载文件的,只需要使用window.open
即可实现。但假如需要传递的参数过多,则不适合使用;同时使用这种方式url也会显得臃肿。
window.open(‘下载url’)
如果url中需要带参数,则可以直接在query上添加参数即可;假如有多个参数,参数与参数之间通过&进行连接。
###【POST请求接口】动态创建form临时表单
// 隐藏的div Dom结构,用于存放临时form
<div id="downloadDiv" style={{ display: 'none' }} />
// 导出数据处理函数
download = () => {
const {date} = this.state;
// 结合隐藏form表单进行react和post接口下载数据
let divElement = document.getElementById('downloadDiv');
ReactDOM.render(
<form action="/api/post/export" method="post" target="_blank">
<input name="date" type="text" value={date} /> // 变量参数值
<input name="status" type="text" value="1" />
</form>,
divElement
);
ReactDOM.findDOMNode(divElement)
.querySelector('form')
.submit();
ReactDOM.unmountComponentAtNode(divElement);
};
上述方式暂未在项目中真实使用,也可以使用下述函数作为公共函数使用即可(其实也是通过创建form临时表单实现)。
// url为接口地址, params为需要传递的参数,此时后端接收的格式为formData
export const onDownloadData = (url, params)=> {
const formElement = document.createElement('form');
formElement.style.display = 'display:none;';
formElement.method = 'post';
formElement.action = url;
formElement.target = 'callBackTarget';
const inputElement = document.createElement('input');
inputElement.type = 'hidden';
inputElement.name = 'params';
inputElement.value = params;
formElement.appendChild(inputElement);
document.body.appendChild(formElement);
formElement.submit();
document.body.removeChild(formElement);
}
实际项目中真正使用并没问题。
参考文章:
-
【React】【下载功能实现总结】结合GET或POST请求接口,下载服务器端文件 转
https://my.oschina.net/u/3682731/blog/1835385
-
前端接受后端文件流并下载的几种方法
https://juejin.im/post/5c1610cae51d455c627a967e#heading-8
-
React使用Post方式从服务器下载文件
https://blog.csdn.net/jiangkai528/article/details/78852777