文件下载问题

文件下载问题

原文

现象一： 点击下载按钮无法下载，但是将 url 输入到地址栏却可以实现下载

排错步骤

1. 查看网络请求（响应头）

• 状态码 200 --- ✅

• Content-Type: application/octet-stream (表示是一个二进制文件) ✅

• content-disposition: attachment; filename=2333.zip (告诉浏览器这是一个下载的附件并告诉浏览器该附件默认的文件名)

2. 查看响应是否和 Content-Type: application/octet-stream 定义的一致

image

可以看到 response 就是一堆乱码，即文件的二进制流表现形式，所以从请求来看其实是没有问题的，文件是正常的返回的，但为啥文件却没有下载下来，下载下来的文件去哪里了呢，注意看上图的另一个红框 XHR ，它的全称是 XMLHttpRequest，是 ajax 请求的一种表现形式。

ajax 本身无法触发浏览器的下载功能, 它的 response 会交由 JavaScript 处理，使用 ajax 下载完成后，response 以字符串的形式存储在内存中，那使用 ajax 就没法下载了吗？不是的，我们看下浏览器为啥能下载

我们发现使用浏览器的 GET 请求（主要以 frame 加载, a 标签点击触发）或 POST 请求(以 form 的形式存在)是可以下载文件的，因为这是浏览器的内置事件，下载的 response 会交由浏览器自己处理，浏览器如果识别到是二进制流数据则下载，如果识别到是可以打开的文件，如 xml, image 等则不会下载，会以预览的样式存在。

那么为啥 ajax 不能默认实现文件下载呢，这是浏览器的安全策略限制的，试想如果 ajax 可以下载文件，那就意味着 ajax 可以直接与磁盘交互，这会存在严重的安全隐患。

根据以上分析，要使用 ajax 下载文件我们也就有思路了,既然使用 a 标签（或 frame）的点击事件可以触发浏览器的内置下载行为，那我们在用 ajax 下载拿到 response 后，可以用 js 新建一个隐藏的 a 标签（标签的 href 指向文件的链接），执行它的 click 事件，这样就触发了浏览器的内置下载事件，就可以下载文件了，不过需要注意的事，创建的 a 标签中要添加一个 download 属性。

这个 download 属性有啥用呢，对于浏览器能打开的文件，例如 html,xml 等，如果你不加 download，点击 a 标签就不是下载了，而是打开。（注意 download 属性目前只被火狐和谷歌兼容）

使用 ajax 来执行下载文件的代码示例如下:

const filename = response.headers['content-disposition'].match(
      /filename=(.*)/
)[1]
// 首先要创建一个 Blob 对象（表示不可变、原始数据的类文件对象）
const blob = new Blob([response.data], {type: 'application/zip'});
if (typeof window.navigator.msSaveBlob !== 'undefined') {
    // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
    window.navigator.msSaveBlob(blob, decodeURI(filename))
} else {
    let elink = document.createElement("a"); // 创建一个标签
    elink.style.display = "none"; // 隐藏标签
    elink.href = window.URL.createObjectURL(blob); // 配置href，指向本地文件的内存地址
    elink.download = filename;
    elink.click();
    URL.revokeObjectURL(elink.href); // 释放URL 对象
    document.body.removeChild(elink); // 移除标签
}

现象二：在浏览器输入图片链接想预览，结果却变成了下载图片

查看请求头： 发现 Content-Type: application/octet-stream

它指任意类型的二进制流数据，一般下载文件返回的是这种类型，浏览器由于无法识别打开流数据，所以会下载，那为啥大多数图片在浏览器上是可以预览的呢，因为它返回的 Content-Type 是 image/png 或 image/jpeg 等浏览器可以直接识别打开的文件，这样就不会执行下载事件

总结

以上的问题需要我们对浏览器的工作机制与 HTTP 协议有一定的了解，所以基础真的很重要啊

比如上图的解决方案中我们通过 content-disposition 来获取文件的名称

const filename = response.headers['content-disposition'].match(
      /filename=(.*)/
)[1]

但在最开始发现这段代码有问题，打印日志发现 response.headers['content-disposition'] 居然为空，可是打开浏览器的 network 会发现， content-disposition 明明存在啊

那为啥在 reponse 的 header 里拿不到 content-disposition 呢？

一查发现原来还是 HTTP 协议的问题

默认情况下，header 只有七种 simple response headers （简单响应首部）可以暴露给外部：

Cache-Control
Content-Language
Content-Length
Content-Type
Expires
Last-Modified
Pragma

这里的暴露给外部，意思是让客户端（比如 Chrome）可以访问得到，既可以在 Network 里看到，也可以在代码里获取到他们的值。

而 content-disposition 不在其中，所以即使服务器在协议回包里加了该字段，如下

response.setHeader("content-disposition", "attachment; filename=" + filename);

但因没“暴露”给外部，客户端就「看得到，吃不到」。

而响应首部 Access-Control-Expose-Headers 就是控制“暴露”的开关，它列出了哪些首部可以作为响应的一部分暴露给外部。

所以如果想要让客户端可以访问到其他的首部信息，服务器不仅要在 header 里加入该首部，还要将它们在 Access-Control-Expose-Headers 里面列出来，如下:

response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
response.setHeader("content-disposition", "attachment; filename=" + filename);

这样的话 JS 的 response header 里就有 content-disposition 的值啦。