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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/848378.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pinterest免费引流实操演示

这篇文章中你将了解到 1.Pinterest网站介绍&#xff0c;用户群体&#xff0c;适合做什么品类。 2.现在的商家都在上面做什么&#xff1f;案例展示。 3.我们在这个站免费引流要怎么做以及注意事项。 1.Pinterest网站介绍&#xff0c;用户群体&#xff0c;适合做什么品类。 P…

Nginx配置详细解释

文章目录 一、配置详细解释关闭版本修改启动的进程数cpu与work进程绑定nginx进程的优先级work进程打开的文件个数event事件 二、Http设置协议配置说明mime虚拟主机aliaslocationaccess模块验证模块自定义错误页面自定义日志存放位置try_files检测文件是否存在长连接 一、配置详…

006 HashSet是如何去重的

文章目录 HashSet是如何去重的数据结构哈希函数与索引计算存储与去重查找与删除特征与总结键 HashSet是如何去重的 数据结构 HashSet底层依赖于HashMap的数据结构&#xff0c;即一个哈希表。这个哈希表本质上是一个数组&#xff0c;数组的每个元素称为一个桶。每个桶中存储的…

附件下载跨域问题-解决

1.若依附件下载跨域 源码&#xff1a; package com.ruoyi.common.utils.file;import java.io.*; import java.net.URLEncoder; import java.nio.charset.StandardCharsets; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; i…

真实场景 这周的任意一天,获取上周一到周日的时间范围-作者:【小可耐教你学影刀RPA】

用户场景 我想在这周的任意一天&#xff0c;获取上周一到周日的时间范围&#xff0c;应该怎么做 解决办法1 用指令解决 最简单 解决办法2 自己写逻辑 不过要用到 获取当前日期指令 当前是礼拜几

Hugging Face系列2:详细剖析Hugging Face网站资源——实战六类开源库

Hugging Face系列2&#xff1a;详细剖析Hugging Face网站资源——实战六类开源库 前言本篇摘要2. Hugging Face开源库2.1 transformers2.1.1 简介2.1.2 实战1. 文本分类2. 图像识别3. 在Pytorch和TensorFlow中使用pipeline 2.2 diffusers2.2.1 简介2.2.2 实战1. 管线2. 模型和调…

俄罗斯ozon平台计算器,ozon定价计算器

在数字化飞速发展的今天&#xff0c;电商平台已成为商家们展示产品、吸引顾客的重要窗口。而在俄罗斯这一广阔的市场中&#xff0c;Ozon平台以其独特的优势&#xff0c;成为了众多电商卖家的首选。然而&#xff0c;想要在Ozon平台上脱颖而出&#xff0c;除了优质的产品和服务外…

初识C++ · 反向迭代器简介

目录 前言 反向迭代器的实现 前言 继模拟实现了list和vector之后&#xff0c;我们对迭代器的印象也是加深了许多&#xff0c;但是我们实现的都是正向迭代器&#xff0c;还没有实现反向迭代器&#xff0c;那么为什么迟迟不实现呢&#xff1f;因为难吗&#xff1f;实际上还好。…

《精品生活》万方普刊投稿发表简介

《精品生活》杂志是由国家新闻出版总署批准&#xff0c;南方出版传媒股份有限公司主管&#xff0c;广东大沿海出版工贸有限公司主办&#xff0c;广东精品生活杂志社出版的综合性文化期刊。主要栏目&#xff1a;教学研究、艺术教育、文化广角、民族文化、理论前沿、综合论坛。 刊…

【2024】Kafka Streams纤细介绍与具体使用(1)

目录 介绍关键特性应用场景核心概念部署方式kafka streams的处理模式 具体使用1、准备工作2、添加依赖3、代码实现3、测试 介绍 Kafka Streams是构建在Apache Kafka之上的客户端库&#xff0c;用于构建高效、实时的流处理应用。它允许你以高吞吐量和低延迟的方式处理记录流&am…

Prompt 指南之零样本与少样本提示,超详细解析!

前言 我将在本文中为你带来另外 2 种提示技术&#xff0c;它们分别是&#xff1a; 零样本提示&#xff08;Zero-shot Prompting&#xff09;少样本提示&#xff08;Few-shot Prompting&#xff09; shot 即代表示例 这两种技术利用 LLM 的强大预训练知识&#xff0c;通过最小…

算法学习之:Raft-分布式一致性/共识算法

基础介绍 Raft是什么&#xff1f; Raft is a consensus algorithm that is designed to be easy to understand. Its equivalent to Paxos in fault-tolerance and performance. The difference is that its decomposed into relatively independent subproblems, and it clea…

React@16.x(19)事件的处理

目录 1&#xff0c;React 事件大致原理1.1&#xff0c;几乎所有的事件处理&#xff0c;都在 document 的事件中处理。1.2&#xff0c;事件参数 2&#xff0c;注意事项 1&#xff0c;React 事件大致原理 这里讨论的事件&#xff0c;是指在 React 内置组件上绑定的事件。 大致原理…

云端狂飙:Django项目部署与性能优化的极速之旅

Hello&#xff0c;我是阿佑&#xff0c;这次阿佑将手把手带你亲自踏上Django项目从单机到云端的全过程&#xff0c;以及如何通过Docker实现项目的无缝迁移和扩展。不仅详细介绍了Docker的基本概念和操作&#xff0c;还深入探讨Docker Compose、Swarm和Kubernetes等高级工具的使…

03-3.1.1 栈的基本概念

&#x1f44b; Hi, I’m Beast Cheng&#x1f440; I’m interested in photography, hiking, landscape…&#x1f331; I’m currently learning python, javascript, kotlin…&#x1f4eb; How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以订…

1Panel 搭建 halo博客

线上服务器一直闲置&#xff0c;刷到视频 1Panel 能更好管理服务器&#xff0c;还能快速搭建博客&#xff0c;便上手试试&#xff0c;的确很方便&#xff0c;顺手记录一下。 零、准备工作 一台服务器&#xff08;按需购买&#xff0c;此处准备的阿里云服务器一台&#xff0c;也…

postman教程-14-生成随机数

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节我们学习了Postman关联接口的调用方法&#xff0c;本小节我们讲解一下Postman生成随机数的方法。 在接口测试中&#xff0c;经常需要向接口发送不同的输入数据&#xff0c;以确保接口的健壮性和可靠性。…

02-2.3.5 静态链表

喜欢《数据结构》部分笔记的小伙伴可以订阅专栏&#xff0c;今后还会不断更新。&#x1f9d1;‍&#x1f4bb; 此外&#xff0c;《程序员必备技能》专栏和《程序员必备工具》专栏&#xff08;该专栏暂未开设&#xff09;日后会逐步更新&#xff0c;感兴趣的小伙伴可以点一下订阅…

中国自动气象站:现代气象观测的中流砥柱

引言 气象观测是人类认识和预报天气的重要手段。在现代科技的推动下&#xff0c;自动气象站成为气象观测的重要工具&#xff0c;为天气预报、防灾减灾和气候研究提供了宝贵的数据支持。本文将介绍中国自动气象站的发展历程、技术特点及其在气象观测中的重要作用。 中国自动气象…

关于远程销售的电子课程开发

一家国际网络安全公司委托我们开发用于培训销售代表远程和电话销售的互动电子内容。我们在 Articulate Storyline 中创建了情节脚本和二维动画&#xff0c;以解释关键概念和销售技巧。互动元素使学习者可以按照自己的节奏进行学习&#xff0c;而我们的动画插图则使材料生动起来…