谈谈“冷门”的Blob

大家在用到文件导入导出功能基本会碰到这个，今天咱就来聊聊Blob。

首先也是最主要的，就是它只能在web worker的情况下使用

如何判断web worker

if (typeof document === 'undefined' && typeof self != 'undefined') {
  env.worker = true
} 

概念

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取。

构造函数

const obj = {key: "Blob"};
const blob = new Blob([JSON.stringify(obj)], {
  type: "application/json",
});

实例属性 

Blob.size 只读

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

Blob.type 只读

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

实例方法

Blob.arrayBuffer()

返回一个 promise，其会兑现一个包含 Blob 所有内容的二进制格式的 ArrayBuffer。

Blob.slice()

返回一个新的 Blob 对象，其中包含调用它的 blob 的指定字节范围内的数据。

相当于文件流的截取

Blob.stream()

返回一个能读取 Blob 内容的 ReadableStream。

Blob.text()

返回一个 promise，其会兑现一个包含 Blob 所有内容的 UTF-8 格式的字符串。

示例

转URL（常用）

let blob = new Blob([res]); // 数组包着
const link = document.createElement("a"); // 创建a标签用于下载
link.style.display = "none"; // 标签在DOM中不显示
link.href = URL.createObjectURL(blob); // 将blob转化为URL
const time = moment(new Date())
            .format("yyyy/MM/DD HH:mm:ss")
            .replace(/[\/: ]/g, "");
link.download = `文件${time}.xlsx`;
document.body.appendChild(link); // 加入dom
link.click(); // 下载
document.body.removeChild(link); // 用完移除
URL.revokeObjectURL(link.href); // 用完移除