通过 Blob 创建下载文件

Blob

如上图所示，Blob 对象有三个部分组成，data:image/jpeg 表示该 Blob 是什么类型的文件。base64 是一个二进制到文本的编码，更多细节查看Base64 编码/解码。其余的就是以 Base64 编码出来的二进制到文本的表现形式。

File

File 用来表示用户本地文件对象。File 继承自 Blob 对象，可以使用 Blob 对象的场合都可以使用它。

File 最常见的使用场合是表单的文件上传控件 <input type="file" /> ，用户选中文件以后，浏览器就会生成一个数组，里面是每一个用户选中的文件，它们都是 File 对象：

Blob 创建下载文件

浏览器允许使用 URL.createObjectURL() 方法，针对 Blob 对象生成一个临时 URL，以便于某些 API 使用。这个 URL 以 blob:// 开头，表明对应一个 Blob 对象，协议头后面是一个识别符，用来唯一对应内存里面的 Blob 对象。

const json = JSON.stringify([
  {
    name: "小红",
    grade: 1
  }
]);

document.querySelector("#down").onclick = () => {
  const blob = new Blob([json], { type: "application/json" });
  const a = document.createElement("a");
  a.download = "data.json";
  a.href = URL.createObjectURL(blob);
  a.click();
};

把需要下载的内容插入到 Blob 对象中，指明文件 MIME 类型。把 URL 传递给 a 标签，再通过点击事件让其执行下载。

FileReader 读取上传文件

const input = document.querySelector("#input");
input.addEventListener("change", e => {
  const reader = new FileReader();
  reader.readAsDataURL(e.target.files[0]);
  reader.onload = e => {
    console.log(reader.result);
  };
});