一、前言
下载文件时，后台接口返回的响应体是文件流格式的，前端接收时如果不进行处理，就会无法正确下载文件（有可能会直接打开文件等）。
在此记录下react的表格行使用file-saver下载文件的方法。（注意不同项目可能有差异，供参考）
样例截图：
二、react表格行使用file-saver下载相关代码(以本人项目为例)
1.首先，本人的一个js文件里有个表格标签，AdvancedTable：
import AdvancedTable from '@/components/AdvancedTable';
……<AdvancedTablenamespace="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><aonClick={() =>{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）老版本浏览器可能不支持。
