如何使用Blob对象进行指定文件名下载

一、Blob对象

---

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

var blob = new Blob( array, options ); // 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。

参数：

• array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。
• options 是一个可选的BlobPropertyBag字典，它可能会指定如下两个属性：
  • type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。
  • endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个： "native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持blob中保存的结束符不变

属性：

• Blob.size() （只读）Blob 对象中所包含数据的大小（字节）。
• Blob.type()（只读）一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。

方法：

• Blob.slice() 方法用于创建一个包含源 Blob的指定字节范围内的数据的新 Blob 对象。
• Blob.close() 方法用于关闭 Blob 对象，以便能释放底层资源。

二、实现下载

---

好了，知识点说完了，该到我们的重头戏了！如何通过前端去实现指定文件名去下载呢?

首先我们先在页面创建一个a标签

var downloadA = document.createElement('a');

然后我们创建一个blob对象，没它我们怎么去下载。。。

var josnData = {text: "我就是要被下载"};
var blob = new Blob([JSON.stringify(josnData)],{type : 'application/json'});

再给a标签的href指定下载链接

downloadA.href = window.URL.createObjectURL(blob);

通过download属性设置一个值来规定下载文件的名称

downloadA.download = '你所起的文件名';

这时候，如果你是通过js去控制下载的，那么请看下面代码，通过click事件去触发a标签

downloadA.click(); // 点我，点我，快点我

然后我们再去释放内存

window.URL.revokeObjectURL(downloadA.href);

到这里，就万事OK咯