Blob文件下载方式

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

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

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

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

axios.request({
        url: "/getDownloadFile",
        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对象