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

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

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

之前不太了解浏览器对于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...

canvs转图片canvs转base64

canvs转图片canvs转base64

二期项目中生成的简历二维码是使用canvs生成的,微信浏览器中不能识别二维码,只能扫码。懒的换phpqrcode,于是转canvs。//设置一个url var url = "{yun:}$config.sy_weburl{/yun}/mingli/index....

html定时刷新,html定时刷新代码,js定时刷新

html定时刷新,html定时刷新代码,js定时刷新

备份代码:这个表示当前页面每5秒钟刷一下,刷一下~ <meta http-equiv="refresh" content="5"> 这个表示当前页面2秒后跳到首页~ <meta http-equiv=&quo...

flex布局,flex布局实例,flex布局教程

flex布局,flex布局实例,flex布局教程

学习flex布局前请一定按照阮一峰老师的教程手工敲一遍,100%理解,光看是一知半解。【一】.基础知识flex布局,只要把元素设置为display:flex,此元素即可称为flex容器,元素的所有子元素都自动成为容器的成员,简称flex-itemflex容器本身有两根轴,水平的主轴,垂直的交叉轴。因...

fastadmin确定按钮事件

fastadmin确定按钮事件

fastadmin在添加页面点击确定按钮,新增数据成功,触发上级页面刷新。先看确定按钮的代码逻辑,来自源码var that = this, submitBtn = $(".layer-footer [type=submi...

理解Angular中*ngIf指令中加问号和不加问号的区别

理解Angular中*ngIf指令中加问号和不加问号的区别

在Angular开发中,我们经常使用ngIf指令来根据条件动态渲染或移除元素。然而,在一些情况下,我们可能需要处理一些可能为空的对象属性。这时,就需要了解在ngIf指令中使用加问号和不加问号的区别。首先,让我们看一下加问号的使用方式,示例代码如下:html复制代码<span class="de...