当前位置:首页 > H5 > 正文内容

js将Blob 或 File 对象通过浏览器进行下载

高老师3年前 (2024-01-10)H5536

之前不太了解浏览器对于Blob和File对象的开放程度,以为不支持直接下载。因为一直觉得浏览器下载必须要一个下载地址,不支持将变量中的文件保存到本地,直到看到了前端同事的代码才发现自己是错的,牢记牢记。

使用 window.URL.createObjectURL() 方法可以创建指向 Blob 或 File 对象的临时URL,这样你就可以在浏览器中下载这个 Blob 或 File 对象。

(1)、创建 Blob 对象

let blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});

(2)、创建指向 Blob 的 URL

let url = window.URL.createObjectURL(blob);

(3)、创建一个用于下载的链接

let a = document.createElement("a");  
a.href = url;  
a.download = "file.txt"; // 或者任何你想要的文件名  
a.style.display = 'none'; // 隐藏链接  
document.body.appendChild(a);

(4)、触发下载

a.click();

(5)、清理URL

window.URL.revokeObjectURL(url);

扫描二维码推送至手机访问。

版权声明:本文由高久峰个人博客发布,如需转载请注明出处。

本文链接:https://blog.20230611.cn/post/697.html

分享给朋友:

“js将Blob 或 File 对象通过浏览器进行下载” 的相关文章

ajax上传文件,formdata上传文件,ajax上传file文件,原生ajax上传文件,ajax上传图片,ajax上传文件formdata

ajax上传文件,formdata上传文件,ajax上传file文件,原生ajax上传文件,ajax上传图片,ajax上传文件formdata

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同...

 js构造函数

js构造函数

工厂模式虽然解决了创建多个对象的问题,但是并没有解决识别对象从属的问题.因为都属于object.因此出现了构造函数//构造函数名称首字母大写是规范 function Box(name,age){ this.name=name; this.age=age; this.run=funct...

javascript原型基础知识

javascript原型基础知识

//我们创建每个函数默认都有一个prototype(原型)属性,这个属性是一个对象 //1.我是普通的构造方法,我的属性叫实例属性,我的方法叫实例方法 /* function Box(name,age){ this.name=name; this.age=age; this.run...

javascript使用原型为内置对象增加方法

javascript使用原型为内置对象增加方法

//字面量的形式创建原型对象 /* function Box(){} Box.prototype={ 'name':'gao', age:23, fun:function(){ return this.name+'--'+...

js 点击复制,js实现手机端点击复制,js实现点击复制,js点击复制到剪贴板

js 点击复制,js实现手机端点击复制,js实现点击复制,js点击复制到剪贴板

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点击复制</title> </head>...

微信禁用右上角的分享按钮,以及隐藏分享的子按钮等菜单项

微信禁用右上角的分享按钮,以及隐藏分享的子按钮等菜单项

和腾讯合作的项目活动中腾讯要求我们必须隐藏朋友圈分享功能,一直以为没有官方Api,百般查找才在文档中找到,可能是自己不太细心。微信官方文档在jsjdk的"界面操作"中有详细说明:关闭当前网页窗口接口wx.closeWindow();批量隐藏功能按钮接口wx.hideMenuIte...