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

简介: 前端 JS 经典:下载的流式传输

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

1. 服务器的方式

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

<a href="http://localhost:6666/a.pdf">点击下载</a>
// 服务端代码
app.get("/es6.pdf", (req, res) => {
  res.setHeader("Content-Disposition", "attachment;filename=es6.pdf");
  res.sendFile(__dirname + "/es6.pdf");
});

2. 客户端的方式

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

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

3. 客户端的权限下载

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

代码如下:

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天前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
102 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
24天前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
52 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
26天前
|
JavaScript 前端开发
Node.js 中实现多任务下载的并发控制策略
Node.js 中实现多任务下载的并发控制策略
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
40 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
4月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
4月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
146 1
|
4月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
102 5
|
4月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
4月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
87 4
|
10月前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗

热门文章

最新文章