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

忘是亡心i 2024-03-17 11:16 28阅读 0赞

## 一、前言 ##

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

在此记录下react的表格行使用file-saver下载文件的方法。（`注意不同项目可能有差异，供参考`）

样例截图：  
![在这里插入图片描述][5de728dd73c341fcb4a58b23bbb722ee.png]

## 二、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）老版本浏览器可能不支持。

[5de728dd73c341fcb4a58b23bbb722ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/06ac28555b60481f9a075120cfa47541.png