前端 JS 经典：下载的流式传输

触发下载在浏览器中有两种方式：1. 客户端的方式 2. 服务器的方式

1. 服务器的方式

通过 a 元素链接到一个服务器的地址，然后需要后端人员配置，当用户点击按钮请求这个地址时，服务端给他加上一个响应头。'Content-Disposition' 设置成附件格式。客户端不用做任何事情，只需要一个超链接就可以了。

html 复制代码

<a href="http://localhost:6666/a.pdf">点击下载</a>

javascript 复制代码

// 服务端代码
app.get("/es6.pdf", (req, res) => {
  res.setHeader("Content-Disposition", "attachment;filename=es6.pdf");
  res.sendFile(__dirname + "/es6.pdf");
});

2. 客户端的方式

当后端人员不知道这个请求头时，只有靠咱自己，可以在 a 标签里加 download 属性，赋值一个文件名。href 的文件地址，必须是同源地址。

html 复制代码

<a href="http://localhost:6666" download="abc.pdf"></a>

3. 客户端的权限下载

很多时候，我们是在 JS 中，获取下载地址，然后创建 a 标签去下载，为什么用这种方式呢，因为我们的下载是需要做权限认证的，只有登录的用户才能下载文件。

代码如下：

javascript 复制代码

const btn = document.querySelector(".btn");

// 给按钮注册点击事件
btn.onclick = async function () {
  const resp = await fetch("http://localhost:9527/es6.pdf", {
    headers: {
      // 将token给服务器带过去，服务端验证成功后，响应文件的二进制数据
      authorization: `Bearer ${getToken()}`,
    },
  });

  // 等待二进制数据到达客户端
  const blob = await resp.blob();

  // 用二进制数据创建一个本地URL地址，blob 地址，本地临时地址。
  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = "es6.pdf";
  a.click();
};

但是这段代码是有问题的，如果是 a 元素点击下载，它的下载逻辑是用户点击 a 元素，对服务器产生了一个请求，服务器就把这个文件数据响应给浏览器，如果文件比较大，就会像流水线一样，分块传输给浏览器，浏览器不会在本地保存这个数据，而是在用户选择文件夹时，让这个数据直接流向这个文件夹，浏览器就不会管这个数据了，这个就从网络 IO 变成了文件 IO，中间浏览器不做本地保存，这就意味着，哪怕这个文件有 100 个 g 也不会占用浏览器内存。

但是如果是 Ajax 请求这种模式，就会出问题，因为 await resp.blob()这个是在等待，等待服务器把数据全部传给浏览器，生成一个 blob 对象，然后要等传输完成后，再在浏览器储存。要等数据都到本地了，才会触发下载。

所以不能直接用 Ajax 传输文件数据了，之所以我们要用 ajax，就是因为我们需要带上 token，那么我们可以这样处理，要下载文件之前，我们先将 token 带给服务器，告诉它我们有没有登录，有登录的话服务器给我一个 cookie，cookie 是临时的，过期时间很短。客户端拿到 cookie 后，再去生成 a 元素，直接去链接这个文件，并且触发这个 a 元素点击。a 元素的点击会自动带这个 cookie 过去，服务器再去验证这个 cookie，成功后，就去传输这个数据。