JavaScript 中的 Blob 对象

发布于 2020-03-30  224 次阅读


最近在捣鼓一个类似云盘的私人项目,采用的是前后端分离的方法。既然是网盘,那自然是要有下载选项,又因为前后端分离,自然不能通过访问后端去获取下载链接。经过一番考量之后还是选择的 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);
  }
}