Blob文件下载方式

 从后端导出文件到前端（Blob）下载过程

对于不是从事音视频方面的同学来说，很多情况下都是通过 window.location.href 来下载文件。这种方式，一般是前后端的登录态是基于 Cookie + Session 的方式，由于浏览器默认会将本地的 cookie 塞到 HTTP 请求首部字段的 Set-Cookie 中，从而实现来带用户的 SessionId，所以，我们也就可以用 window.location.href 来打开一个链接下载文件。

当然，还有一种情况，不需要登录态的校验（比较che）。

众所周知，还有另一种登录态的处理方式 JWT (JSON Web Token)。这种情况，一般会要求，前端在下载文件的时候在请求首部字段中添加 Token 首部字段。那么，这样一来，我们就不能直接通过 window.location.href 来下载文件。

不过，幸运的是我们有 Blob，它是浏览器端的类文件对象，基于二进制数据，我们可以通过它来优雅地处理文件下载，不限于音视频、PDF、Excel 等等。所以，今天我们就从后端导出文件到 HTTP 协议、非简单请求下的预检请求、以及最后的 Blob 处理文件，了解一番何为其然、如何使其然？

 

 

responseType: 'blob' // 这一行是关键，拿到blob数据类型的文件

axios.request({
        url: "/bondParser/api/getParser",
        method: "post",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        responseType: "blob",
    })
    .then(res => {

    })

 

通过a标签打开新页面下载文件

　　　 console.log("下载文件内容", this.content)
      const blob = new Blob([this.content], {type: 'text/plain;charset=utf-8'})

      let downloadElement = document.createElement('a');
      let href = window.URL.createObjectURL(blob);           //创建下载的链接
      downloadElement.href = href;
      let time = (new Date()).valueOf();
      downloadElement.download = '代码库' + time + '.java'; //下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click();                               //点击下载
      document.body.removeChild(downloadElement);            //下载完成移除元素
      window.URL.revokeObjectURL(href);                      //释放掉blob对象

 

 

 

通过a标签打开新页面下载文件

 

//导出文件
// 通过a标签打开新页面下载文件
const a = document.createElement('a')
// 构造一个blob对象来处理数据
const blob = new Blob[res.data]
if (res.headers['content-disposition']) {
    // 拿到用户上传的文件名
    let fileName = res.headers['content-dispositon'].splice('filename=')[1]
    fileName = decodeURI(encodeURI(fileName))
    // URL.createObjectURL()会产生一个url字符串，可以像使用普通 URL 那样使用它，比如用在 img.src 上
    a.href = URL.createObjectURL(blob)
    // a标签里有download属性可以自定义文件名
    a.setAttribute(
        'download',
        fileName
    )
    document.body.appendChild(a)
    a.click();
    document.body.removeChild(a)
}

 

 

例如：

Content-Disposition
	attachment;filename=%E5%85%A5%E6%B2%B3%E6%8E%92%E6%B1%A1%E5%8F%A3%E7%9B%91%E6%B5%8B%E6%95%B0%E6%8D%AE.xlsx

获取响应头的文件名称

 const disposition = response.headers['content-disposition']
 const fileName = decodeURI(disposition.split('filename*=UTF-8\'\'')[1] || disposition.split('filename*=UTF-8\'\'')[1])
 console.log(fileName)

 

 

参考链接 ：https://segmentfault.com/a/1190000023731567