前端 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,成功后,就去传输这个数据。

相关推荐
三巧3 分钟前
纯CSS吃豆人(JS仅控制进度)
javascript·css·html
SummerGao.4 分钟前
【解决】layui layer的提示框,弹出框一闪而过的问题
前端·layui
软件技术NINI20 分钟前
html css js网页制作成品——HTML+CSS+js美甲店网页设计(5页)附源码
javascript·css·html
JAVA学习通23 分钟前
JAVA多线程(8.0)
java·开发语言
Luck_ff081026 分钟前
【Python爬虫详解】第四篇:使用解析库提取网页数据——BeautifuSoup
开发语言·爬虫·python
天天扭码32 分钟前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试
学渣6765634 分钟前
什么时候使用Python 虚拟环境(venv)而不用conda
开发语言·python·conda
拉不动的猪34 分钟前
前端开发中常见的数据结构优化问题
前端·javascript·面试
街尾杂货店&34 分钟前
css word
前端·css
Мартин.37 分钟前
[Meachines] [Hard] CrimeStoppers LFI+ZIP-Shell+Firefox-Dec+DLINK+rootme-0.5
前端·firefox