js 通过流的方式进行下载(js创建对象的三种方式)
xiyangw 2022-11-24 17:10 35 浏览 0 评论
背景
项目上需要用到多语言,项目设计语言选择是通过header传递的,如果直接用平时location.href下载并无法实现这个效果,然后在网上查阅了一些资料,可以通过流处理来实现下载,代码如下
downloadFile(){ let timestamp = new Date().getTime(); //时间戳 let url =XXXXXXXXXXXX; let xmlResquest = new XMLHttpRequest(); xmlResquest.open("GET", url, true); xmlResquest.setRequestHeader("Authorization", "bearer" + this.token); //token验证 xmlResquest.responseType = "blob"; xmlResquest.onload = function(oEvent) { //接口响应后的处理 var content = xmlResquest.response; // 组装a标签 let elink = document.createElement("a");// 设置下载文件名 elink.download = "track-kml-" + timestamp + ".kml"; elink.style.display = "none"; let blob = new Blob([content]); elink.href = URL.createObjectURL(blob); document.body.appendChild(elink); elink.click(); document.body.removeChild(elink); URL.revokeObjectURL(blob); //释放对象 }; xmlResquest.send(); }
本着不懂就学的原则,查阅了部分不懂的方法,以下资料来源MDN
URL.createObjectURL
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
内存管理
在每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。
XMLHttpRequest.responseType
XMLHttpRequest.responseType 属性是一个枚举类型的属性,返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串,它将使用默认的"text"类型。
在工作环境(Work Environment)中将responseType的值设置为"document"通常会被忽略. 当将responseType设置为一个特定的类型时,你需要确保服务器所返回的类型和你所设置的返回值类型是兼容的。那么如果两者类型不兼容呢?恭喜你,你会发现服务器返回的数据变成了null,即使服务器返回了数据。还有一个要注意的是,给一个同步请求设置responseType会抛出一个InvalidAccessError 的异常。
responseType支持以下几种值:
值 | 描述 |
"" | 将 responseType 设为空字符串与设置为"text"相同, 是默认类型 (实际上是 DOMString)。 |
"arraybuffer" | response 是一个包含二进制数据的 JavaScript ArrayBuffer 。 |
"blob" | response 是一个包含二进制数据的 Blob 对象 。 |
"document" | response 是一个 HTML Document 或 XML XMLDocument ,这取决于接收到的数据的 MIME 类型。请参阅 HTML in XMLHttpRequest 以了解使用 XHR 获取 HTML 内容的更多信息。 |
"json" | response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的。 |
"text" | response 是包含在 DOMString 对象中的文本。 |
"moz-chunked-arraybuffer" | 与"arraybuffer"相似,但是数据会被接收到一个流中。使用此响应类型时,响应中的值仅在 progress 事件的处理程序中可用,并且只包含上一次响应 progress 事件以后收到的数据,而不是自请求发送以来收到的所有数据。 在 progress 事件处理时访问 response 将返回到目前为止收到的数据。在 progress 事件处理程序之外访问, response 的值会始终为 null 。 |
"ms-stream" | response 是下载流的一部分;此响应类型仅允许下载请求,并且仅受Internet Explorer支持。 |
相关推荐
-
- 国家电网照片修改系统常见问题(国家电网的照片怎样上传)
-
照片处理http://jl.zggqzp.com/zt/2020dw_zpxg/?a=d&b=zhgq1.上传按钮点击不了请尝试刷新一个网页过几秒等网页...
-
2023-03-21 19:44 xiyangw
-
- 浏览器如何禁用JavaScript(浏览器如何禁用缓存)
-
为了方便对一些网站功能进行测试,需要浏览器禁用JavaScript,那这个怎么才能做到呢?1.通过F12进入开发者工具,使用快捷键CTRL+SHIFT+P(Wi...
-
2023-03-21 19:44 xiyangw
-
- Twitter 推文删除后,将从外部网站消失:显示一个空白框
-
据TheVerge报道,Twitter现在对被删除的推文嵌入第三方网站时的显示方式做了一个较小但重要的改变。至少从三月底开始,当嵌入的推文被删除时,社交...
-
2023-03-21 19:43 xiyangw
- 客户端相关文件读取漏洞(文件读取漏洞利用)
-
客户端也存在文件读取漏洞,大多是基于XSS漏洞读取本地文件。1.浏览器/FlashXSS一般来说,很多浏览器会禁止JavaScript代码读取本地文件的相关操作,如请求一个远程网站,如果它的Java...
- iOS 16锁定lockdown模式对浏览器的影响 - sevarg
-
Apple正在预览一项突破性的安全功能,为可能面临来自开发国家资助的雇佣间谍软件的私营公司的高度针对性网络攻击风险的用户提供专门的额外保护。启用iOS16的锁定Lockdown模式后对浏览器的功能...
-
- 如何安全的存储用户的密码(存储用户密码信息的文件是?)
-
大多数的web开发者都会遇到设计用户账号系统的需求。账号系统最重要的一个方面就是如何保护用户的密码。一些大公司的用户数据库泄露事件也时有发生,所以我们必须采取一...
-
2023-03-21 19:43 xiyangw
-
- SSR 它到底香不香?细数 SSR 的利与弊(ssr有什么)
-
一.SSR简介SSR(Server-SideRendering)并不是什么新奇的概念,前后端分层之前很长的一段时间里都是以服务端渲染为主(JSP、PHP),...
-
2023-03-21 19:42 xiyangw
-
- 破解网页禁止复制粘贴(怎样破解网页禁止粘贴)
-
你想复制网页内容吗?使用右键复制或者CtrlC,跳出付钱画面是不是很恼火。网页绝大部分限制复制粘贴都是采用js实现的,那我们禁用js不就OK了么?假如你使用...
-
2023-03-21 19:42 xiyangw
-
- 捍卫非法加密货币采矿活动(加密货币非法交易)
-
网络套图什么是加密货币?加密货币是一种用作交换媒介的数字货币,与其他货币相似。比特币,莱特币,门罗币,以太坊和瑞波币只是可用的几种加密货币类型。与其他货币不同,...
-
2023-03-21 19:41 xiyangw
-
- 网页禁止复制操作实现方法汇总(网页禁止复制 js)
-
我们经常在某些网站上复制内容的时候发现,竟然复制不了。友好的交互还会弹窗告诉你,登陆后才能复制哦。那么网站是如何阻止用户复制的呢?今天帮大家汇总一下能够实现的方...
-
2023-03-21 19:40 xiyangw
-
- iOS 9.3再曝URL崩溃漏洞,苹果啊你到底上不上心啊
-
在苹果iOS9.3正式推送之后,很多用户都已经升级到了这个最新的系统,iOS9.3带来的夜间模式、备忘录加密等功能受到了很多用户的欢迎,在稳定性方面也...
-
2023-03-21 19:40 xiyangw
-
- 网络安全之文件上传,看这一篇就够了(网络安全文稿)
-
概述文件上传漏洞是发生在有上传功能的应用中,如果应用程序对用户的上传文件没有控制或者存在缺陷,攻击者可以利用应用上传功能存在的缺陷,上传木马、病毒等有危害的文件...
-
2023-03-21 19:39 xiyangw
- 前端经典面试题(60道前端面试题包含JS、CSS、React、程序题等)上
-
文章转载:乐字节简答题1、什么是防抖和节流?有什么区别?如何实现?参考答案防抖触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间思路:每次触发事件时都取消之前的延时调用...
-
- JavaScript语言中的变量(js变量作用范围)
-
JavaScript中变量是用于存储数据值的容器,举个例子,例如vara=1,其中a就是一个变量,1是存入变量的值,也叫做字面量。在实际应用...
-
2023-03-21 19:38 xiyangw
- JavaScript面试题(javascript面试题及答案)
-
1.javaScript的数据类型有什么基本数据类型:Undefined、Null、Boolean、Number、String、Object、Symbol(es6--原始数据类型)复杂数据类型:obj...
你 发表评论:
欢迎- 一周热门
-
-
第十四天 JSON和Python(封禁在禽兽家的第十四天小说)
-
asp.net core supersocket介绍以及源码分析(asp.net core oauth2.0)
-
Java19的新特性(java19和17的区别)
-
08《Nginx 入门教程》Nginx 的 Http 模块介绍(中)
-
笔记本无线连接局域网的设置教程(笔记本无线连接局域网的设置教程在哪)
-
Linux下HTTP服务配置教程(java安装教程及环境配置方法)
-
SEO基础教程(一):适合新手的SEO教程(seo秘籍-自学seo零基础知识入门优化教程)
-
SpringCache,统一Redis、Memcached操作,轻松将缓存与业务解耦
-
web前端基础入门教程(非常详细)HTML+CSS+JavaScript
-
使用nodejs和express搭建http web服务(nodejs搭建服务器)
-
- 标签列表
-
- XSLT (103)
- Java Number & (81)
- Math 类 (81)
- Java String类 (82)
- Java9新特性 (82)
- C语言enum(枚举) (81)
- C语言输入& (89)
- 输出 (89)
- C语言标准库- (303)
- Go 语言基础语法 (80)
- Go 语言函数 (80)
- PHP 变量 (82)
- flashtext (111)
- c#正则 (120)
- jquery版本 (110)
- js去掉字符串中的某个字符 (119)
- vue过滤 (132)
- c#ocr (93)
- javascript字符串转数字 (81)
- ASP Session (95)
- ASP Response (86)
- JavaScript 函数定义 (84)
- JavaScript 闭包 (90)
- JS 类 (83)
- 前端开发培训—般几个月 (119)