前言
阅读项目源码发现下载都使用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下。