关于前端:聊一聊-155K-的-FileSaver是如何工作的

38次阅读

共计 9308 个字符，预计需要花费 24 分钟才能阅读完成。

FileSaver.js 是在客户端保留文件的解决方案，非常适合在客户端上生成文件的 Web 应用程序。它简略易用且兼容大多数浏览器，被作为我的项目依赖利用在 6.3 万的我的项目中。在近期的我的项目中，阿宝哥再一次应用到了它，所以就想写篇文章来聊一聊这个优良的开源我的项目。

一、FileSaver.js 简介

FileSaver.js 是 HTML5 的 saveAs() FileSaver 实现。它反对大多数支流的浏览器，其兼容性如下图所示：

（图片起源：https://github.com/eligrey/Fi…）

关注「全栈修仙之路」浏览阿宝哥原创的 3 本收费电子书（累计下载近 2 万）及 50 几篇“重学 TS”教程。

1.1 saveAs API

FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom})

saveAs 办法反对三个参数，第一个参数示意它反对 Blob/File/Url 三种类型，第二个参数示意文件名（可选），而第三个参数示意配置对象（可选）。如果你须要 FlieSaver.js 主动提供 Unicode 文本编码提醒（参考：字节程序标记），则须要设置 {autoBom: true}。

1.2 保留文本 

let blob = new Blob(["大家好，我是阿宝哥!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello.txt");

1.3 保留线上资源 

FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

如果下载的 URL 地址与以后站点是同域的，则将应用 a

  文件名称：
  文件大小：
  下载声明：本站部分资源来自于网络收集，若侵犯了你的隐私或版权，请及时联系我们删除有关信息。
下载地址：

形式下载。否则，会先应用 同步的 HEAD 申请 来判断是否反对 CORS 机制，若反对的话，将进行数据下载并应用 Blob URL 实现文件下载。如果不反对 CORS 机制的话，将会尝试应用 a

  文件名称：
  文件大小：
  下载声明：本站部分资源来自于网络收集，若侵犯了你的隐私或版权，请及时联系我们删除有关信息。
下载地址：

形式下载。

规范的 W3C File API Blob 接口并非在所有浏览器中都可用，对于这个问题，你能够思考应用 Blob.js 来解决兼容性问题。

（图片起源：https://caniuse.com/?search=blob）

1.4 保留 Canvas 画布内容 

let canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {saveAs(blob, "abao.png");
});

须要留神的是 canvas.toBlob() 办法并非在所有浏览器中都可用，对于这个问题，你能够思考应用 canvas-toBlob.js 来解决兼容性问题。

（图片起源：https://caniuse.com/?search=t…）

在以上的示例中，咱们屡次见到 Blob 的身影，因而在介绍 FileSaver.js 源码时，阿宝哥先来简略介绍一下 Blob 的相干常识。

二、Blob 简介

Blob（Binary Large Object）示意二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个繁多个体的汇合。Blob 通常是影像、声音或多媒体文件。 在 JavaScript 中 Blob 类型的对象示意不可变的相似文件对象的原始数据。

2.1 Blob 构造函数

Blob 由一个可选的字符串 type（通常是 MIME 类型）和 blobParts 组成：

MIME（Multipurpose Internet Mail Extensions）多用途互联网邮件扩大类型，是设定某种扩展名的文件用一种应用程序来关上的形式类型，当该扩展名文件被拜访的时候，浏览器会主动应用指定应用程序来关上。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。

常见的 MIME 类型有：超文本标记语言文本 .html text/html、PNG 图像 .png image/png、一般文本 .txt text/plain 等。

在 JavaScript 中咱们能够通过 Blob 的构造函数来创立 Blob 对象，Blob 构造函数的语法如下：

var aBlob = new Blob(blobParts, options);

相干的参数阐明如下：

  • blobParts：它是一个由 ArrayBuffer，ArrayBufferView，Blob，DOMString 等对象形成的数组。DOMStrings 会被编码为 UTF-8。

  • options：一个可选的对象，蕴含以下两个属性：

    • type —— 默认值为 ""，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。
    • endings —— 默认值为 "transparent"，用于指定蕴含行结束符 \n 的字符串如何被写入。它是以下两个值中的一个："native"，代表行结束符会被更改为适宜宿主操作系统文件系统的换行符，或者 "transparent"，代表会放弃 blob 中保留的结束符不变。

介绍完 Blob 之后，咱们再来介绍一下 Blob URL。

2.2 Blob URL

Blob URL/Object URL 是一种伪协定，容许 Blob 和 File 对象用作图像，下载二进制数据链接等的 URL 源。在浏览器中，咱们应用 URL.createObjectURL 办法来创立 Blob URL，该办法接管一个 Blob 对象，并为其创立一个惟一的 URL，其模式为 blob:<origin>/<uuid>，对应的示例如下：

blob:https://example.org/40a5fb5a-d56d-4a33-b4e2-0acf6a8e5f641

浏览器外部为每个通过 URL.createObjectURL 生成的 URL 存储了一个 URL → Blob 映射。因而，此类 URL 较短，但能够拜访 Blob。生成的 URL 仅在以后文档关上的状态下才无效。它容许援用 <img>、<a> 中的 Blob，但如果你拜访的 Blob URL 不再存在，则会从浏览器中收到 404 谬误。

上述的 Blob URL 看似很不错，但实际上它也有副作用。 尽管存储了 URL → Blob 的映射，但 Blob 自身仍驻留在内存中，浏览器无奈开释它。映射在文档卸载时主动革除，因而 Blob 对象随后被开释 。然而，如果应用程序寿命很长，那不会很快产生。因而，如果咱们创立一个 Blob URL，即便不再须要该 Blob，它也会存在内存中。

针对这个问题，咱们能够调用 URL.revokeObjectURL(url) 办法，从外部映射中删除援用，从而容许删除 Blob（如果没有其余援用），并开释内存。

好的，当初咱们曾经介绍了 Blob 和 Blob URL。如果你还意犹未尽，想深刻了解 Blob 的话，能够浏览 你不晓得的 Blob 这篇文章，接下来咱们开始剖析 FileSaver.js 的源码。

如果你想理解浏览源码的思路与技巧，能够浏览 应用这些思路与技巧，我读懂了多个优良的开源我的项目 这篇文章。

三、FileSaver.js 源码解析

在 FileSaver.js 外部提供了三种计划来实现文件保留，因而接下来咱们将别离来介绍这三种计划。

3.1 计划一

当 FileSaver.js 在保留文件时，如果以后平台中 a 标签反对 download 属性且非 MacOS WebView 环境，则会优先应用 a

  文件名称：
  文件大小：
  下载声明：本站部分资源来自于网络收集，若侵犯了你的隐私或版权，请及时联系我们删除有关信息。
下载地址：

来实现文件保留。在具体应用过程中，咱们是通过调用 saveAs 办法来保留文件，该办法的定义如下：

FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom})

通过观察 saveAs 办法的签名，咱们可知该办法反对字符串和 Blob 两种类型的参数，因而在 saveAs 办法外部须要别离解决这两种类型的参数，上面咱们先来剖析字符串参数的情景。

3.1.1 字符串类型参数

在后面的示例中，咱们演示了如何利用 saveAs 办法来保留线上的图片：

FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

在计划一中，saveAs 办法的解决逻辑如下所示：

// Use download attribute first if possible (#193 Lumia mobile) unless this is a macOS WebView
function saveAs(blob, name, opts) {
  var URL = _global.URL || _global.webkitURL;
  var a = document.createElement("a");
  name = name || blob.name || "download";

  a.download = name;
  a.rel = "noopener";

  if (typeof blob === "string") {
    a.href = blob;
    if (a.origin !== location.origin) {// (1)
      corsEnabled(a.href)
        ? download(blob, name, opts)
        : click(a, (a.target = "_blank"));
    } else {// (2)
      click(a);
    }
  } else {// 省略解决 Blob 类型参数}
}

在以上代码中，如果发现下载资源的 URL 地址与以后站点是非同域的，则会先应用 同步的 HEAD 申请 来判断是否反对 CORS 机制，若反对的话，就会调用 download 办法进行文件下载。首先咱们先来剖析 corsEnabled 办法：

function corsEnabled(url) {var xhr = new XMLHttpRequest();
  xhr.open("HEAD", url, false);
  try {xhr.send();
  } catch (e) {}
  return xhr.status >= 200 && xhr.status <= 299;
}

corsEnabled 办法的实现很简略，就是通过 XMLHttpRequest API 发动一个同步的 HEAD 申请，而后判断返回的状态码是否在 [200 ~ 299] 的范畴内。接着咱们来看一下 download 办法的具体实现：

function download(url, name, opts) {var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.responseType = "blob";
  xhr.onload = function () {saveAs(xhr.response, name, opts);
  };
  xhr.onerror = function () {console.error("could not download file");
  };
  xhr.send();}

同样 download 办法的实现也很简略，也是通过 XMLHttpRequest API 来发动 HTTP 申请，与大家相熟的 JSON 格局不同的是，咱们须要设置 responseType 的类型为 blob。此外，因为返回的后果是 blob 类型的数据，所以在胜利回调函数外部会持续调用 saveAs 办法来实现文件保留。

而对于不反对 CORS 机制或同域的情景，它会调用外部的 click 办法来实现下载性能，该办法的具体实现如下：

// `a.click()` doesn't work for all browsers (#465)
function click(node) {
  try {node.dispatchEvent(new MouseEvent("click"));
  } catch (e) {var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent(
      "click", true, true, window, 0, 0, 0, 80, 20, 
      false, false, false, false, 0, null
    );
    node.dispatchEvent(evt);
  }
}

在 click 办法外部，会优先调用 node 对象上的 dispatchEvent 办法来派发 click 事件。当出现异常的时候，会在 catch 语句进行相应的异样解决，catch 语句中的 MouseEvent.initMouseEvent() 办法用于初始化鼠标事件的值。 但须要留神的是，该个性曾经从 Web 规范中删除，尽管一些浏览器目前依然反对它，但兴许会在将来的某个工夫进行反对，请尽量不要应用该个性 。

3.1.2 blob 类型参数

同样，在后面的示例中，咱们演示了如何利用 saveAs 办法来保留 Blob 类型数据：

let blob = new Blob(["大家好，我是阿宝哥!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello.txt");

blob 类型参数的解决逻辑，被定义在 saveAs 办法体的 else 分支中：

// Use download attribute first if possible (#193 Lumia mobile) unless this is a macOS WebView
function saveAs(blob, name, opts) {
  var URL = _global.URL || _global.webkitURL;
  var a = document.createElement("a");
  name = name || blob.name || "download";

  a.download = name;
  a.rel = "noopener";

  if (typeof blob === "string") {// 省略解决字符串类型参数} else {a.href = URL.createObjectURL(blob);
    setTimeout(function () {URL.revokeObjectURL(a.href);
    }, 4e4); // 40s
    setTimeout(function () {click(a);
    }, 0);
  }
}

对于 blob 类型的参数，首先会通过 createObjectURL 办法来创立 Object URL，而后在通过 click 办法执行文件保留。为了能及时开释内存，在 else 解决分支中，会启动一个定时器来执行清理操作。此时，计划一咱们曾经介绍完了，接下去要介绍的计划二次要是为了兼容 IE 浏览器。

3.2 计划二

在 Internet Explorer 10 浏览器中，msSaveBlob 和 msSaveOrOpenBlob 办法容许用户在客户端上保留文件，其中 msSaveBlob 办法只提供一个保留按钮，而 msSaveOrOpenBlob 办法提供了保留和关上按钮，对应的应用形式如下所示：

window.navigator.msSaveBlob(blobObject, 'msSaveBlob_hello.txt');
window.navigator.msSaveOrOpenBlob(blobObject, 'msSaveBlobOrOpenBlob_hello.txt');

理解完上述的常识和计划一中介绍的 corsEnabled、download 和 click 办法后，再来看计划二的代码，就很清晰明了。在满足 "msSaveOrOpenBlob" in navigator 条件时，FileSaver.js 会应用计划二来实现文件保留。跟后面一样，咱们先来剖析 字符串类型参数 的解决逻辑。

3.2.1 字符串类型参数 
// Use msSaveOrOpenBlob as a second approach
function saveAs(blob, name, opts) {
  name = name || blob.name || "download";
  if (typeof blob === "string") {if (corsEnabled(blob)) { // 判断是否反对 CORS
      download(blob, name, opts);
    } else {var a = document.createElement("a");
      a.href = blob;
      a.target = "_blank";
      setTimeout(function () {click(a);
      });
    }
  } else {// 省略解决 Blob 类型参数}
}
3.2.2 blob 类型参数 
// Use msSaveOrOpenBlob as a second approach
function saveAs(blob, name, opts) {
  name = name || blob.name || "download";
  if (typeof blob === "string") {// 省略解决字符串类型参数} else {navigator.msSaveOrOpenBlob(bom(blob, opts), name); // 提供了保留和关上按钮
  }
}

3.3 计划三

如果计划一和计划二都不反对的话，FileSaver.js 就会降级应用 FileReader API 和 open API 新开窗口来实现文件保留。

3.3.1 字符串类型参数 
// Fallback to using FileReader and a popup
function saveAs(blob, name, opts, popup) {
  // Open a popup immediately do go around popup blocker
  // Mostly only available on user interaction and the fileReader is async so...
  popup = popup || open("","_blank");
  if (popup) {popup.document.title = popup.document.body.innerText = "downloading...";}

  if (typeof blob === "string") return download(blob, name, opts);
    // 解决 Blob 类型参数
}
3.3.2 blob 类型参数

对于 blob 类型的参数来说，在 saveAs 办法外部会依据不同的环境选用不同的计划，比方在 Safari 浏览器环境中，它会利用 FileReader API 先把 Blob 对象转换为 Data URL，而后再把该 Data URL 地址赋值给新开的窗口或以后窗口的 location 对象，具体的代码如下：

// Fallback to using FileReader and a popup
function saveAs(blob, name, opts, popup) {
  // Open a popup immediately do go around popup blocker
  // Mostly only available on user interaction and the fileReader is async so...
  popup = popup || open("","_blank");
  if (popup) { // 设置新开窗口的题目
    popup.document.title = popup.document.body.innerText = "downloading...";
  }

  if (typeof blob === "string") return download(blob, name, opts);

  var force = blob.type === "application/octet-stream"; // 二进制流数据
  var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari;
  var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent);

  if ((isChromeIOS || (force && isSafari) || isMacOSWebView) &&
    typeof FileReader !== "undefined"
  ) {
    // Safari doesn't allow downloading of blob URLs
    var reader = new FileReader();
    reader.onloadend = function () {
      var url = reader.result;
      url = isChromeIOS
        ? url
        : url.replace(/^data:[^;]*;/, "data:attachment/file;"); // 解决成附件的模式
      if (popup) popup.location.href = url;
      else location = url;
      popup = null; // reverse-tabnabbing #460
    };
    reader.readAsDataURL(blob);
  } else {// 省略 Object URL 的解决逻辑}
}

其实对于 FileReader API 来说，除了反对把 File/Blob 对象转换为 Data URL 之外，它还提供了 readAsArrayBuffer() 和 readAsText() 办法，用于把 File/Blob 对象转换为其它的数据格式。在 玩转前端二进制 文章中，阿宝哥具体介绍了 FileReader API 在前端图片解决场景中的利用，浏览完该文章之后，你们将能轻松看懂以下转换关系图：

最初咱们再来看一下 else 分支的代码：

function saveAs(blob, name, opts, popup) {popup = popup || open("","_blank");
  if (popup) {popup.document.title = popup.document.body.innerText = "downloading...";}

  // 解决字符串类型参数
  if (typeof blob === "string") return download(blob, name, opts);

  if ((isChromeIOS || (force && isSafari) || isMacOSWebView) &&
    typeof FileReader !== "undefined"
  ) {// 省略 FileReader API 解决逻辑} else {
    var URL = _global.URL || _global.webkitURL;
    var url = URL.createObjectURL(blob);
    if (popup) popup.location = url;
    else location.href = url;
    popup = null; // reverse-tabnabbing #460
    setTimeout(function () {URL.revokeObjectURL(url);
    }, 4e4); // 40s
  }
}

到这里 FileSaver.js 这个库的源码曾经剖析实现了，跟着阿宝哥浏览上述源码之后，是不是感觉写一个兼容性好、简略易用的第三方库是如许不容易。在理论我的项目中，如果你须要保留超过 blob 大小限度的超大文件，或者没有足够的内存空间，你能够思考应用更高级的 StreamSaver.js 库来实现文件保留性能。

关注「全栈修仙之路」浏览阿宝哥原创的 3 本收费电子书（累计下载近 2 万）及 8 篇源码剖析系列教程。

四、参考资源

  • 你不晓得的 Blob
  • 玩转前端二进制
  • MDN – FileReader API
  • 百度百科 – 字节程序标记 (ByteOrderMark)

正文完
前端
发表至： 前端
2020-12-08
 0
关于前端:热点面试题为什么-01-02-03如何让其相等
关于前端:CSS3新增了哪些选择器属性结构伪类伪元素选择器
关于前端:webpack与构建发展简史
关于前端:原生popover终于来了