JavaScript中的Blob对象

发布于 2020-03-29  11 次阅读

最近在捣鼓一个类似云盘的私人项目，采用的是前后端分离的方法。既然是网盘，那自然是要有下载选项，又因为前后端分离，自然不能通过访问后端去获取下载链接。经过一番考量之后还是选择的js中的blob

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

如何构建Blob对象

Blob(blobParts[, options])

返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
Blob构造函数接受两个参数：

1.参数data是一组数据，所以必须是数组，即使只有一个字符串也必须用数组装起来

2.参数options是对这一Blob对象的配置属性

Blob对象的属性

Blob.size只读
Blob 对象中所包含数据的大小（字节）。

Blob.type只读
一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。

Blob对象的方法

Blob.slice([start[, end[, contentType]]])
返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。

Blob.stream()
返回一个能读取blob内容的 ReadableStream。

Blob.text()
返回一个promise且包含blob所有内容的UTF-8格式的 USVString。

Blob.arrayBuffer()
返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer

使用实例

使用ajax向后端发送请求

this.axios({
    method: "post",
    url: "/api/download.php",
    data: {},
    responseType: "blob"
}).then(row => {
    this.download(row.data, row.filename);
});
后端需要返回的是该文件的二进制文件流，而且一定要带上heard头

download函数

download(data, filename) {
  if (!data) {
    return;
  }
  let blob = new Blob([data]);
  let fileName = filename;
  if ("download" in document.createElement("a")) {
    // 不是IE浏览器
    let url = window.URL.createObjectURL(blob);
    let link = document.createElement("a");
    link.style.display = "none";
    link.href = url;
    link.setAttribute("download", fileName);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link); // 下载完成移除元素
    window.URL.revokeObjectURL(url); // 释放掉blob对象
  } else {
    // IE 10+
    window.navigator.msSaveBlob(blob, fileName);
  }
}
赏