• 项目中经常会遇到需要导出列表内容，或者下载文件之类的需求。结合各种情况，我总结了前端最常用的三种方法来接受后端传过来的文件流并下载，针对不同的情况可以使用不同的方法。

首先是后端将文件转换成byte数组

/**
     * 将文件转换成byte数组
     * @param filePath  文件File类 通过new File(文件路径)
     * @return byte数组
     */
    public static byte[] File2byte(File filePath) {
        byte[] buffer = null;
        try {
            FileInputStream fis = new FileInputStream(filePath);
            ByteArrayOutputStream bos = new ByteArrayOutputStream();
            byte[] b = new byte[1024];
            int n;
            while ((n = fis.read(b)) != -1) {
                bos.write(b, 0, n);
            }
            fis.close();
            bos.close();
            buffer = bos.toByteArray();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return buffer;
    }

这里有还可以对byte进行base64编码和解码

byte[] bytes = tradeFile(file);
String str = new String(Base64.encodeBase64(bytes))
byte[] bytes = Base64.decodeBase64(str);

后面是重点，前端接受后端文件流并下载的几种方法

方法一
使用场景
针对后端的get请求

具体实现

<a href="后端文件下载接口地址" >下载文件</a>

直接用个标签来接受后端的文件流

方法二
使用场景
针对后端的post请求 利用原生的XMLHttpRequest方法实现

具体实现

function request () {
    const req = new XMLHttpRequest();
    req.open('POST', '<接口地址>', true);
    req.responseType = 'blob';
    req.setRequestHeader('Content-Type', 'application/json');
    req.onload = function() {
      const data = req.response;
      const blob = new Blob([data]);
      const blobUrl = window.URL.createObjectURL(blob);
      download(blobUrl) ;
    };
    req.send('<请求参数：json字符串>');
  };

function download(blobUrl) {
  const a = document.createElement('a');
  a.download = '<文件名>';
  a.href = blobUrl;
  a.click();
}

request();

方法三
使用场景
针对后端的post请求 利用原生的fetch方法实现

具体实现

function request() {
  fetch('<接口地址>', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: '<请求参数：json字符串>',
  })
    .then(res => res.blob())
    .then(data => {
      let blobUrl = window.URL.createObjectURL(data);
      download(blobUrl);
    });
}

function download(blobUrl) {
  const a = document.createElement('a');
  a.download = '<文件名>';
  a.href = blobUrl;
  a.click();
}

request();

总结

  • 如果后端提供的下载接口是get类型，可以直接使用方法一，简单又便捷；当然如果想使用方法二、三也是可以的，不过感觉有点舍近求远了。
    如果后端提供的下载接口是post类型，就必须要用方法二或者方法三了。

方法二和方法三怎么取舍？

  • 当你的项目里的接口请求全是基于XMLHttpRequest实现的，这时方法二就更加适合，只要基于你原来项目中的接口请求工具类加以扩展就行了。
    当你的项目里的接口请求全是基于fetch实现的，这时方法三就更加适合，比如我现在的做的一个项目就是基于ant design
    pro的后台管理系统，它里面的请求类就是基于fetch的，所以我就直接用的方法三，只要在它的request.js文件中稍作修改就行。
    我这里讨论的是两种原生的请求方式，如果你项目中引用了第三方请求包来发送请求，比如axios之类的，那就要另当别论了。

作者：嘴里起了个泡