FileSaver源码阅读

前言

阅读项目源码发现下载都使用FileSaver.js插件，所以就打算看看该插件内部的实现，这是初衷。

具体内容

FileSaver.js中的具体实现逻辑如下：

从上面逻辑图中可以看出，FileSaver.js不支持IE10以下的文件下载
上面是主要的流程所列，实际上具体的实现，主要可以分为两点来讲：

• 支持a标签的download属性的浏览器
• 不支持download属性的浏览器

支持download的
FileSaver.js对于支持download属性的浏览器，就是使用a标签来实现下载的，核心的实现逻辑大概如下：

function saveAs(blob, name) {
     
  var save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a");
  var can_use_save_link = "download" in save_link;
  if (can_use_save_link) {
    var object_url = URL.createObjectURL(blob);
    a.href = object_url;
    a.download = name;
    // 处理暴露的事件
    dispatch_all();
    // 释放object Url
    revoke(object_url);
  }
}

实际上就是创建a标签，主动触发click()事件，这里用到了URL.createObjectURL()创建对象URL。

不支持download的
对于不支持download属性的浏览器，在源码中处理实际上是分为两类：

• Safari和ios 下chrome，如果支持FileReader

• 其他

实际上对于不支持download的浏览器的处理就是三种形式下载功能的实现：

• 如果是特殊浏览器并且支持FileReader， 则使用FileReader来异步读取文件内容，读取完毕后，使用window.open来实现下载，如果不支持window.open来下载，则使用location.href替换URL来实现下载

• 其他情况下，都是使用URL.createObjectURL来构建对象URL，使用window.open 或location.href替换URL来实现下载

总结

FileSaver.js中实现下载的形式分为大概3种形式：

• 可以使用a标签的download来实现的

• 特殊浏览器支持FileReader的，使用其构建URL，使用window.open或location.href来实现

• 除了特殊的浏览器，使用URL.createObjectURL来构建对象URL，使用window.open或location.href来实现

具体的注释都上传到我的GitHub上，感兴趣可以view下。