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

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

高老师2年前 (2024-01-10)H5492

之前不太了解浏览器对于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 对象通过浏览器进行下载” 的相关文章

Javascript封装的原生Ajax请求

Javascript封装的原生Ajax请求

由于工作需要长期使用Ajax,一个页面重复的AJAX请求太多,于是封装起来,只需要编写回调函数/* ------------- 使用方法: 1.ajaxrequest()函数执行准备的参数(1.请求地址2.发送数据字符串拼接3.type值可选get/post4.回调函数名称)   exam...

Javascript-WebSql的用法

Javascript-WebSql的用法

    WebSql的原理是浏览器集成了sqllite数据库,Js操作,浏览器协助完成,没有多复杂。<!--          三个核心方法   ...

tmodjs模板语法

tmodjs模板语法

    TmodJS是一套完整的前端模块框架。    虽然我们PHP框架自带各种模板引擎,但是始终是后端模板引擎。例如我们在使用ThinkPHP3.2.3中如果是Ajax异步加载页面,拼接HTML真的是很头疼的一件事情。...

阻止表单提交刷新页面

阻止表单提交刷新页面

<form action="save.php" method="post"   target="nm_iframe">      &nbs...

websql的使用方法

websql的使用方法

<!--          三个核心方法          openDatabase:这个方法使用现有数据库或创建...

Javascript绑定事件和移除事件

Javascript绑定事件和移除事件

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body>...