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

相关推荐
小年糕是糕手6 分钟前
【数据结构】双向链表“0”基础知识讲解 + 实战演练
c语言·开发语言·数据结构·c++·学习·算法·链表
将车24412 分钟前
C++实现二叉树搜索树
开发语言·数据结构·c++·笔记·学习
梵得儿SHI28 分钟前
Java 反射机制核心类详解:Class、Constructor、Method、Field
java·开发语言·反射·class·constructor·java反射·java反射机制
金梦人生32 分钟前
Css性能优化
前端·css
Holin_浩霖33 分钟前
UI设计的底层逻辑:从组件到系统的跃迁
前端
Holin_浩霖33 分钟前
前端开发者的 Web3 全图解实战 二
前端
写代码的皮筏艇34 分钟前
CSS属性继承与特殊值
前端·css
kevlin_coder37 分钟前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生38 分钟前
JS 性能优化
前端·javascript
peachSoda742 分钟前
自定义配置小程序tabbar逻辑思路
javascript·vue.js·微信小程序·小程序