关于React+SpringMVC+axios前后端分离实现文件下载

 

最近React项目中用到了导出功能，网上搜索一番后决定采用Blob方式（推荐）来实现，现分享下具体实现步骤。

我主要采用后端生成excel文件流返回给前端来实现的，具体代码如下：

    @RequestMapping(value = "/download")
    public void export(HttpServletRequest request,
            HttpServletResponse resp) {
        HSSFWorkbook book = new HSSFWorkbook();
         try {
             HSSFSheet sheet = book.createSheet("mySheent");
              String[] headers = {"用户ID", "邮箱账号","暱称","年龄","性别","状态", "注册时间"};
              HSSFRow row = sheet.createRow(0);
              for (short i = 0; i < headers.length; i++) {
                  //创建单元格，每行多少数据就创建多少个单元格
                  HSSFCell cell = row.createCell(i);
                  HSSFRichTextString text = new HSSFRichTextString(headers[i]);
                  //给单元格设置内容
                  cell.setCellValue(text);
              }
            resp.setContentType("application/vnd.ms-excel;charset=utf-8");
            resp.setHeader("Content-Disposition", "attachment;filename="+ new String(("Excel.xls").getBytes(), "iso-8859-1"));
            book.write(resp.getOutputStream());
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

这里需要注意的地方有两个：

   resp.setContentType("application/vnd.ms-excel;charset=utf-8");
   resp.setHeader("Content-Disposition", "attachment;filename="+ new String(("Excel.xls").getBytes(), "iso-8859-1"));

第一行application/vnd.ms-excel说明将结果导出为Excel

第二行说明提供那个打开/保存对话框，将文件作为附件下载

上面就是后台的全部代码了，接下来看一下前端的代码：

//service.js

import { request } from 'utils/request';
export async function exportExcel(params){
    var reqBody = {
        url: "/download",
        method: 'post',
        config:{
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            responseType: 'blob',
        },
        data:{
            ...params
       }
    }
    return request(reqBody);
}

这里为了方便做记录，我是直接在页面中使用axios发送了个post请求。

仔细看axios请求加了个responseType: 'blob'配置，这是很重要的

请求成功后返回了一个Blob对象，你如果没有正确的加上responseType: 'blob’这个参数，返回的就不是个Blob对象，而是字符串了。

接下来就是将返回的Blob对象下载下来了：

//model.js

import { exportExcel } from 'services/service';

export default {
    namespace: 'softphone',
    state: {
        data:[],
    },
    reducers: {
      search(state, {payload}) {
        //console.log("<<<<<<<<payload:",payload);
        return {...state, ...payload};
      },
    },
    effects:{
        *exportReport({ payload }, { call, put }) {
            try {
                    let response = yield call(exportExcel, payload);
                    console.log('--------------response-------', response);
                    if (response.statusCode === 200) {
                        var blob = new Blob([response.obj], {type: 'application/vnd.ms-excel;charset=utf-8'})
                        var url = window.URL.createObjectURL(blob);
                        var aLink = document.createElement("a");
                        aLink.style.display = "none";
                        aLink.href = url;
                        aLink.setAttribute("download", "用户列表.xls");
                        document.body.appendChild(aLink);
                        aLink.click();
                        document.body.removeChild(aLink); //下载完成移除元素
                        window.URL.revokeObjectURL(url); //释放掉blob对象
                    }  
            } catch (error) {
                console.error(error);
            }
        },
    },
  };

以上就是React导出Excel的全部代码，写的比较仓促，台风来了赶紧下班，有问题欢迎留言讨论~~~~~

关于service.js中request从哪来的，请参照我上一篇博文https://mp.csdn.net/postedit/98982974