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 Urlrevoke(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下。

FileSaver源码阅读相关推荐

应用监控CAT之cat-client源码阅读（一）
CAT 由大众点评开发的,基于 Java 的实时应用监控平台,包括实时应用监控,业务监控.对于及时发现线上问题非常有用.(不知道大家有没有在用) 应用自然是最初级的,用完之后,还想了解下其背后的原理, ...
centos下将vim配置为强大的源码阅读器
每日杂事缠身,让自己在不断得烦扰之后终于有了自己的清静时光来熟悉一下我的工具,每次熟悉源码都需要先在windows端改好,拖到linux端,再编译.出现问题,还得重新回到windows端,这个过程太耗 ...
源码阅读：AFNetworking（十六）——UIWebView+AFNetworking
该文章阅读的AFNetworking的版本为3.2.0. 这个分类提供了对请求周期进行控制的方法,包括进度监控.成功和失败的回调. 1.接口文件 1.1.属性 /**网络会话管理者对象*/ @prop ...
源码阅读：SDWebImage（六）——SDWebImageCoderHelper
该文章阅读的SDWebImage的版本为4.3.3. 这个类提供了四个方法,这四个方法可分为两类,一类是动图处理,一类是图像方向处理. 1.私有函数先来看一下这个类里的两个函数 /**这个函数是计算 ...
mybatis源码阅读
说下mybatis执行一个sql语句的流程执行语句,事务等SqlSession都交给了excutor,excutor又委托给statementHandler SimpleExecutor:每执行一次 ...
24 UsageEnvironment使用环境抽象基类——Live555源码阅读(三)UsageEnvironment
24 UsageEnvironment使用环境抽象基类--Live555源码阅读(三)UsageEnvironment 24 UsageEnvironment使用环境抽象基类--Live555源码阅读 ...
Transformers包tokenizer.encode()方法源码阅读笔记
Transformers包tokenizer.encode()方法源码阅读笔记_天才小呵呵的博客-CSDN博客_tokenizer.encode
源码阅读笔记 BiLSTM+CRF做NER任务流程图
源码阅读笔记 BiLSTM+CRF做NER任务(二) 源码地址:https://github.com/ZhixiuYe/NER-pytorch 本篇正式进入源码的阅读,按照流程顺序,一一解剖. 一.流 ...
源码阅读：AFNetworking（八）——AFAutoPurgingImageCache
该文章阅读的AFNetworking的版本为3.2.0. AFAutoPurgingImageCache该类是用来管理内存中图片的缓存. 1.接口文件 1.1.AFImageCache协议这个协议定 ...

FileSaver源码阅读

前言

具体内容

总结

FileSaver源码阅读相关推荐

最新文章

热门文章