后台返回blob文件流，前端实现下载文件

后台返回文件流，前端实现下载文件

BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。

文档介绍https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob

目的：

后端返回的文件是一个blob格式的流文件，需要前端进行转码，得到一个url，实现下载文件的功能，
这里说法比较多，但是没有测试，所以列举几个方法，试用

首先实现过程

第一种： 就是先向后端进行请求得到返回数据，进行转blob，
1.Blob对象的 的类型传值 不传乱码
2.生成URL的时候 要是不行就写成window.URL.

//请求回来的数据
.then(res => {
        let blob = new Blob([res],{
            type:'application/vnd.ms-excel'      //将会被放入到blob中的数组内容的MIME类型
        });
        let objectUrl = URL.createObjectURL(blob);  //生成一个url
        downloadFile(objectUrl,'文件名称')
      })
downloadFile(content, filename) {
    let a = document.createElement('a')
    a.href = content
    a.download = filename
    a.click()
}

第二种：
在请求的时候加上 responseType: 'blob' 声明这是一个 blob的返回值，

//请求回来的数据
.then(res => {
        let blob = new Blob([res]);
        let objectUrl = URL.createObjectURL(blob);  //生成一个url
        downloadFile(objectUrl,'文件名称')
      })
downloadFile(content, filename) {
    let a = document.createElement('a')
    a.href = content
    a.download = filename
    a.click()
}

总结及注意：

1.就是blob的文件格式你得写，要不在返回值之后写文件格式，要不然请求的时候就告诉后台你是要blob格式的要不然乱码
2.就都试试，大部分第一种就行
3.还有人说： axios请求要是在乱码 就加上responseType:'arraybuffer' 试试 或者上面的说的responseType: 'blob'
4.我觉得应该在封装axios的时候单独封装一个请求文件的下载，这样方便操作，不然要是项目大了，有点别的，牵一发而动全身