一、前言
下载文件时，后台接口返回的响应体是文件流格式的，前端接收时如果不进行处理，就会无法正确下载文件（有可能会直接打开文件等）。
在此记录下react的表格行使用file-saver下载文件的方法。（注意不同项目可能有差异，供参考）
样例截图：
二、react表格行使用file-saver下载相关代码(以本人项目为例)
1.首先，本人的一个js文件里有个表格标签，AdvancedTable：
import AdvancedTable from '@/components/AdvancedTable';
……
<AdvancedTable
namespace="myPageModels"
queryPara={queryPara}
data={data}
columns={this.getColumns()}
rowSelection={rowSelection}
loading={loading}
/>
其中，namespace是表格名称相关的；
queryPara是表格查询参数相关的，里面有例如 queryPara.page = 0; queryPara.sort = 'id,desc'; queryPara.size = 10;这些，点击翻页的时候框架会用到；
data就是表格数据，格式是[{"id":1,"name":"第一行"},{"id":2,"name":"第二行"}]这样，就是个JsonList数组；
this.getColumns()是表格行数据展示的方法，下载按钮就在这里实现的，后续继续详述；
rowSelection是表格行是否允许选择的配置，可以配置成单选、多选、不允许选择等，也可以设置被选中的监听方法；
loading是表格加载是否完成的标志位，可以让框架控制，也可以自己写逻辑、开始设置为false、当进行某个操作成功后再设置为true，就能实现表格一直转圈、当操作成功后才显示加载完毕。
2.this.getColumns()是表格行数据展示的方法，其中有下载按钮，样例如下：
import {Button, Divider, Icon, Collapse, Popconfirm, Modal, message, Switch, Drawer} from 'antd';
……
getColumns = () => {
const { dispatch } = this.props;
const {
pageSeriesModels: { isAdmin },
} = this.props;
const { nowPageValue } = this.state;
const columns = [
{……},
{
title: '下载',
dataIndex: 'download',
align: 'center',
width: 100,
render: (text, record) => (
<Fragment>
<Fragment>
<a
onClick={() =>
{
let fileSuffix = '';
try{
fileSuffix = record.documentName.substring(record.documentName.length-3,record.documentName.length).toLowerCase()
} catch(e){}
console.log("fileSuffix",fileSuffix)
if(fileSuffix === 'pdf'){
dispatch({
type: 'pageSeriesModels/downloadPdf',
paramFileId: record.id,
paramType: nowPageValue,
paramDocumentName: record.documentName,
//这个callback实际上写是写了，但是不知道为什么没有被调用
callback: (resp) => {
console.log(resp);
Modal.success({
centered: true,
content: '正在下载，请稍后',
okText: formatMessage({ id: 'global.ok' }),
});
},
})
}else{
message.error('文件格式错误，无法下载');
}
}
}
>
<Icon type="download" /> <FormattedMessage id="下载" />
</a>
</Fragment>
{isAdmin ? <Divider type="vertical" /> : null }
</Fragment>
),
},
];
return columns;
};
这段的意思是，表格里会展示一个下载按钮；
点击下载按钮后，会先判断下文件名后缀是不是pdf，如果不是pdf，就弹出个提示信息"文件格式错误，无法下载"；
如果是pdf，就会调用dispatch方法，执行另一个js里的下载方法/downloadPdf，传入的参数是 paramFileId: record.id, paramType: nowPageValue, paramDocumentName: record.documentName,；其中record.id就是表格的数据data里的id，paramType是一个type(个人项目用的，值是1)，paramDocumentName同理，是表格data里的文件名。
3.dispatch里的 type: 'pageSeriesModels/downloadPdf'，就会调用另一个js里的方法，样例如下：
import * as services from '@/services/api';
export default {
namespace: 'pageSeriesModels',
……
effects: {
*downloadPdf({ paramFileId,paramType,paramDocumentName, callback }, { call, put }) {
//const value = {};
//value.fileId = paramFileId;
//value.type = paramType;
const response = yield call(services.down1, `/api/downloadPdf?fileId=${paramFileId}&type=${paramType}`, null, paramDocumentName);
if (response) {
if (callback) callback(response);
}
},
}
dispatch的用法，这里就不详述了（可以看本人之前的文章或者百度）；
这个方法的意思是，调用services.down1方法，传入入参；
如果执行后有返回值response，并且有回调方法callback(刚才调用dispatch时传入的)，就执行回调方法。
4.services.down1方法，又在另一个自己写的js文件里（上方import了），样例如下：
import { stringify } from 'qs';
import { message } from 'antd';
import { saveAs } from 'file-saver';
import fetch from 'dva/fetch';
……
export async function down1(url, values, filename) {
return fetch(`/commonHeadUrl${url}`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/x-msdownload; charset=utf-8',
Authorization: `Bearer ${sessionStorage.getItem('token')}`,
},
}).then(response => {
if (response.status !== 200 && response.status !== 201) {
message.error('出错了，请将功能路径告知管理员');
} else {
response.blob().then(blob => {
if (blob.size === 0) {
message.error('下载失败，请将功能路径告知管理员');
} else {
saveAs(blob, filename);
}
});
}
});
}
这段代码的意思是，设置了为post请求、header参数，然后请求/commonHeadUrl/api/downloadPdf?fileId=${paramFileId}&type=${paramType}这个地址；（没有显式写域名，会自动带上当前域名）
如果返回文件流，就使用saveAs方法下载，就实现浏览器下载了。
其中，saveAs就是file-saver里的方法，如果没有，可以使用命令装下：
npm install file-saver
其它组件如果没有的，可以先百度下，如果是框架的组件，那就也用npm i 下载下。
到此就可以用file-saver下载文件了。
三、备注
1.本人的vue项目中，经常使用axios发送get与post等请求
npm install axios
2.本人的react项目中，使用fetch发送get与post等请求
（1）fetch：原生函数，不再使用 XmlHttpRequest 对象提交 ajax 请求。
（2）老版本浏览器可能不支持。
