前端经过Blob实现文件下载

时间 2019-11-06

标签前端经过 blob 实现文件下载繁體版

原文原文链接

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

Blob对象简要介绍

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

语法

const aBlob = new Blob( array, options ); 

复制代码

参数说明json

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() 使这个潜在的对象回到原来的地方，容许平台在合适的时机进行垃圾收集。bash

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、视频连接防盗等多种场景中，你们能够发挥本身的想象力来进行实现

参考连接

文章首发自我的博客