react表格行下载文件方法总结

一、前言

下载文件时，后台接口返回的响应体是文件流格式的，前端接收时如果不进行处理，就会无法正确下载文件（有可能会直接打开文件等）。

在此记录下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）老版本浏览器可能不支持。