通过Blob实现文件下载入门攻略_blob入门攻略

最近遇到一个需求,需要将页面中的配置信息下载下来供用户方便使用,以前这个场景的需求有时候会放到后端处理,然后给返回一个下载链接。其实并不需要这么麻烦,这样既增大了服务器的负载,也让用户产生了没有必要的网络请求,现在前端也是可以直接通过Blob对象进行前端文件下载了,下面简单记录下相关实现Blob对象简要介绍Blob 对象表示一个不可变、原始数据的类文件对象。

通过Blob实现文件下载入门攻略

最近遇到一个需求,需要将页面中的配置信息下载下来供用户方便使用,以前这个场景的需求有时候会放到后端处理,然后给返回一个下载链接。其实并不需要这么麻烦,这样既增大了服务器的负载,也让用户产生了没有必要的网络请求,现在前端也是可以直接通过Blob对象进行前端文件下载了,下面简单记录下相关实现

通过Blob实现文件下载入门攻略_blob入门攻略

Blob对象简要介绍

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 Blob 的功能并将其扩展使其支持用户系统上的文件。

语法

const aBlob = new Blob( array, options ); 

参数说明

array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放进 Blob。DOMStrings会被编码为UTF-8。options 是一个可选的BlobPropertyBag字典,它可能会指定如下两个属性:

  • type,默认值为 “”,它代表了将会被放入到blob中的数组内容的MIME类型。
  • endings,默认值为”transparent”,用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个: “native”,代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者 “transparent”,代表会保持blob中保存的结束符不变

示例

const debug = {hello: "world"};
const blob = new Blob([JSON.stringify(debug, null, 2)],{type : 'application/json'});

URL.createObjectURL() 与 URL.revokeObjectURL()介绍

URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。相当于这个方法创建了一个传入对象的内存引用地址

createObjectURL语法

objectURL = URL.createObjectURL(object);

参数说明

  • object 是用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。​

返回值

  • 一个可以引用到指定对象的DOMString

URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后,应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。

你可以在 sourceopen 被处理之后的任何时候调用 revokeObjectURL()。这是因为 createObjectURL() 仅仅意味着将一个媒体元素的 src 属性关联到一个 MediaSource 对象上去。调用revokeObjectURL() 使这个潜在的对象回到原来的地方,允许平台在合适的时机进行垃圾收集。

revokeObjectURL语法

window.URL.revokeObjectURL(objectURL);

参数说明

  • objectURL 是一个 DOMString,表示通过调用 URL.createObjectURL() 方法产生的 URL 对象。

内存管理

在每次调用createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。

实际运用

比如在某后台管理中希望将用户的几个配置信息导入到一个json文件当中供用户下载下来  

代码实现如下:

const config = {
  name: 'lsqy',
  password: 'yourpassword',
  ak: 'XXXXXXXXXX',
  sk: 'XXXXXXXXXX'
}

const blobContent = new Blob(
  [JSON.stringify(config, null, 2)],
  {type : 'application/json'}
);

const blobUrl = window.URL.createObjectURL(blobContent)

downloadFileByBlob(blobUrl, 'config.json')

function downloadFileByBlob(blobUrl, filename) {
  const eleLink = document.createElement('a')
  eleLink.download = filename
  eleLink.style.display = 'none'
  eleLink.href = blobUrl
  // 触发点击
  document.body.appendChild(eleLink)
  eleLink.click()
  // 然后移除
  document.body.removeChild(eleLink)
}


执行上面的代码,我们可以得到一个config.json的文件,可以看到,其实很简单就实现了这个场景需求,当然这里是下载的json文件,下载其他的文件也是一样的道理,只是需要得到相应文件的blob数据,再结合相应的MIME类型即可;

兼容性方面目前主流浏览器都已支持,ie10以及以上也支持。

另外Blob结合URL.revokeObjectURL()与URL.revokeObjectURL()还可以用在预览图片、预览PDF、视频链接防盗等多种场景中,大家可以发挥自己的想象力来进行实现

海计划公众号
(0)
上一篇 2020/03/26 23:33
下一篇 2020/03/26 23:33

您可能感兴趣的内容

  • 深入JS继承入门教程_继承小白入门

    前言对于灵活的js而言,继承相比于java等语言,继承实现方式可谓百花齐放。方式的多样就意味着知识点繁多,当然也是面试时绕不开的点。撇开ES6 class不谈,传统的继承方式你知道几种?每种实现原理是什么,优劣点能谈谈吗。这里就结合具体例子,按照渐进式的思路来看看继承的发展。准备谈到js继承之前先回顾下js 实例化对象的实现方式。构造函数是指可以通过new

    2020/03/22
  • 《深入浅出webpack》有感小白入门_webpack使用教程

    对于前端仔来说,相信大家对webpack都再熟悉不过了,但是你对webpack的了解程度又有多深呢,笔者花了几天时间看了一下《深入浅出webpack》,虽然说书中大部分介绍的是配置和使用相关的,但是如果你对webpack的配置、使用、原理和构建流程更加熟悉的话,对于你的开发可以说是百里无一害!本文不会局限于介绍配置,也不会详细介绍打包原理(后面打算写一篇有关

    2020/03/23
  • Web Workers 到底是什么?使用教程_线程小白帮助

    以前我们总说,JS是单线程没有多线程,当JS在页面中运行长耗时同步任务的时候就会导致页面假死影响用户体验,从而需要设置把任务放在任务队列中;执行任务队列中的任务也并非多线程进行的,然而现在HTML5提供了我们前端开发这样的能力 – Web Workers API,我们一起来看一看 Web Worker 是什么,怎么去使用它,在实际生产中如何去用它来进行产出。

    2020/03/26
  • JS保留两位小数使用帮助_运算小白攻略

    四舍五入以下处理结果会四舍五入:var num =2.446242342;
    num = num.toFixed(2); // 输出结果为 2.45不四舍五入以下处理结果不会四舍五入:第一种,先把小数边整数:Math.floor(15.7784514000 * 100) / 100
    // 输出结果为 15.77第二种,当作字符串,使用正则匹配:Number

    2020/03/20
  • 你解决的问题比你编写的代码更重要!菜鸟教程_代码小白入门

    软件的目的有时会被遗忘程序员似乎忘记了软件的真正目的,那就是解决现实问题。50年前,在1968年,由北约科学委员会主办的软件工程工作会议召开。那时,人们开始注意到软件正在成为社会的基本组成部分。然而,它也变得难以理解。在那次会议之后,编程开始成为一个新的行业。它开始摆脱商界人士的控制。无论从那时起编程的路径如何,业务和软件开发之间的分离仍然存在问题 – 或者

    2020/04/05
  • jquery之cookie操作使用攻略jquery.cookie.js_cookie小白常识

    Cookies定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术;下载与引入:jquery.cookie.js基于jquery;先引入jquery,再引入:jquery.cookie.js;下载:http://plugins.jquery.com/cookie/<script type="text/javascript"

    2020/03/29
  • Safari Date() 函数对日期时间字符串(yyyy-MM-dd HH:mm:ss) 提示NaN的问题入门教程_日期小白常识

    今天发现一个奇怪的问题,在iPhone使用 safari 选择定时发布文章到OSC,选择时间后提示不是合法的时间,判断时间的代码如下:var d = new Date(‘2020-01-23 23:15’);if (isNaN(d)) {console.log(‘isNaN’);}else{console.log(‘pass’);}在Chrome下会输出 p

    2020/03/20
  • 蓝湖小白教程_简单好用的团队工作台,产品设计协作

    蓝湖小白教程 官方网址:https://lanhuapp.com/ 简介描述:简单好用的团队工作台,产品设计协作 蓝湖是一款产品文档和设计图的共享平台,帮助互联网团队更好地管理文档…

    2020/03/11
  • 原生js获取DOM对象的几种方法小白帮助_dom教程视频

    1.通过id获取
    let box= document.getElementById(“box”);
    注意:getElementById()括号中的不需要在前面加“#”,因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。 2. 通过class获取<div cla

    2020/04/05
  • react hook超实用的用法和技巧分析入门百科_react入门基础教程

    react hook发布也已经有几个月了,相信有部分人已经开始使用了,还有些人在犹豫要不要用,可能更多人安于现状,没有要用的打算,甚至还有很多公司的react版本是15或以下的,迫于升级的难度没有使用。以我个人的观点,要不要使用react hook呢?建议用的的人项目react版本已经是react16了新建的项目一直对新技术保持关注,跃跃欲试的人对函数式编程

    2020/03/30
  • 大头网菜鸟攻略_Js网页特效代码

    大头网菜鸟攻略 官方网址:http://www.datouwang.com/ 简介描述:Js网页特效代码 大头网为网页前端人员提供建站常用的网页特效,内容涵盖焦点图,导航菜单,幻灯…

    2020/03/06
  • ant-design-pro-vue小白教程_基于 Ant Design of Vue 实现的 Ant Design Pro

    ant-design-pro-vue小白教程 官方网址:https://pro.loacg.com GitHub:https://github.com/sendya/ant-des…

    2020/03/07
  • npm view命令新手入门_npm菜鸟教程下载

    npm view功能查看注册表信息npm view使用npm view [/][@] [[.]…]
    aliases: info, show, vnpm view说明此命令显示有关程序包的数据,并将其打印到outfd配置引用的流中,默认情况下为stdout。要显示包的包注册表项

    2020/03/24
  • js中两个表达式运算结果的解析: []==![] 和{}==!{}基础知识_表达式小白指南

    []==![] 1. 感叹号!的优先级最高,因此先计算![], 其结果为 false, 所以表达式被转换成: []==false.3. 遇到Boolean类型,需要先转换成Number类型,所以表达是变成 []==04. 0是基础类型,[]是引用类型,所以引用类型需要转换成基础类型:[]转换的结果是 ([]).valueOf().toString(),为

    Web前端 2020/03/26
  • next-blog小白攻略_使用next.js实现一个基于Markdown的博客

    next-blog小白攻略 GitHub:https://github.com/tscanlin/next-blog 简介描述:使用next.js实现一个基于Markdown的博客…

    2020/03/08
  • 如何写出高性能的CSS3动画菜鸟攻略_css3动画基础指南

    小伙伴们在写CSS3动画时,会发现在手机上很多时候会感到卡顿,然后Google到的解决方案大多是开启GPU加速transform: translate3d(0,0,0); 可解决,但是为什么开启GPU加速就能让动画顺滑呢?
    我们从浏览器内部去理解下JS是单线程的,但是浏览器可以开启多个线程,渲染一个网页需要两个重要的线程来共同完成:Main Thread 主

    2020/04/06