文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

聊一聊 15.5K 的 FileSaver,是如何工作的?

2024-12-03 16:26

关注

本文转载自微信公众号「全栈修仙之路」,作者阿宝哥。转载本文请联系全栈修仙之路公众号。  

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

一、FileSaver.js 简介

FileSaver.js 是 HTML5 的 saveAs() FileSaver 实现。它支持大多数主流的浏览器,其兼容性如下图所示:

 

(图片来源:https://github.com/eligrey/FileSaver.js)

1.1 saveAs API

  1. 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 保存线上资源

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

如果下载的 URL 地址与当前站点是同域的,则将使用 a[download] 方式下载。否则,会先使用 同步的 HEAD 请求 来判断是否支持 CORS 机制,若支持的话,将进行数据下载并使用 Blob URL 实现文件下载。如果不支持 CORS 机制的话,将会尝试使用 a[download] 方式下载。

标准的 W3C File API Blob 接口并非在所有浏览器中都可用,对于这个问题,你可以考虑使用 Blob.js 来解决兼容性问题。

 

(图片来源:https://www.528045.com/file/upload/202412/02/l3cbx0nk10o.png"); 

  • }); 
  • 需要注意的是 canvas.toBlob() 方法并非在所有浏览器中都可用,对于这个问题,你可以考虑使用 canvas-toBlob.js 来解决兼容性问题。

     

    (图片来源:https://caniuse.com/?search=toBlob)

    在以上的示例中,我们多次见到 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 构造函数的语法如下:

    1. var aBlob = new Blob(blobParts, options); 

    相关的参数说明如下:

    介绍完 Blob 之后,我们再来介绍一下 Blob URL。

    2.2 Blob URL

    Blob URL/Object URL 是一种伪协议,允许 Blob 和 File 对象用作图像,下载二进制数据链接等的 URL 源。在浏览器中,我们使用 URL.createObjectURL 方法来创建 Blob URL,该方法接收一个 Blob 对象,并为其创建一个唯一的 URL,其形式为 blob:/,对应的示例如下:

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

    浏览器内部为每个通过 URL.createObjectURL 生成的 URL 存储了一个 URL → Blob 映射。因此,此类 URL 较短,但可以访问 Blob。生成的 URL 仅在当前文档打开的状态下才有效。它允许引用 、 中的 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[download] 来实现文件保存。在具体使用过程中,我们是通过调用 saveAs 方法来保存文件,该方法的定义如下:

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

    通过观察 saveAs 方法的签名,我们可知该方法支持字符串和 Blob 两种类型的参数,因此在 saveAs 方法内部需要分别处理这两种类型的参数,下面我们先来分析字符串参数的情形。

    3.1.1 字符串类型参数

    在前面的示例中,我们演示了如何利用 saveAs 方法来保存线上的图片:

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

    在方案一中,saveAs 方法的处理逻辑如下所示:

    1. // Use download attribute first if possible (#193 Lumia mobile) unless this is a macOS WebView 
    2. function saveAs(blob, name, opts) { 
    3.   var URL = _global.URL || _global.webkitURL; 
    4.   var a = document.createElement("a"); 
    5.   name = name || blob.name || "download"
    6.  
    7.   a.download = name
    8.   a.rel = "noopener"
    9.  
    10.   if (typeof blob === "string") { 
    11.     a.href = blob; 
    12.     if (a.origin !== location.origin) { // (1) 
    13.       corsEnabled(a.href) 
    14.         ? download(blob, name, opts) 
    15.         : click(a, (a.target = "_blank")); 
    16.     } else { // (2) 
    17.       click(a); 
    18.     } 
    19.   } else { 
    20.     // 省略处理Blob类型参数 
    21.   } 

    在以上代码中,如果发现下载资源的 URL 地址与当前站点是非同域的,则会先使用 同步的 HEAD 请求 来判断是否支持 CORS 机制,若支持的话,就会调用 download 方法进行文件下载。首先我们先来分析 corsEnabled 方法:

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

    corsEnabled 方法的实现很简单,就是通过 XMLHttpRequest API 发起一个同步的 HEAD 请求,然后判断返回的状态码是否在 [200 ~ 299] 的范围内。接着我们来看一下download 方法的具体实现:

    1. function download(url, name, opts) { 
    2.   var xhr = new XMLHttpRequest(); 
    3.   xhr.open("GET", url); 
    4.   xhr.responseType = "blob"
    5.   xhr.onload = function () { 
    6.     saveAs(xhr.response, name, opts); 
    7.   }; 
    8.   xhr.onerror = function () { 
    9.     console.error("could not download file"); 
    10.   }; 
    11.   xhr.send(); 

    同样 download 方法的实现也很简单,也是通过 XMLHttpRequest API 来发起 HTTP 请求,与大家熟悉的 JSON 格式不同的是,我们需要设置 responseType 的类型为 blob。此外,因为返回的结果是 blob 类型的数据,所以在成功回调函数内部会继续调用 saveAs方法来实现文件保存。

    而对于不支持 CORS 机制或同域的情形,它会调用内部的 click 方法来完成下载功能,该方法的具体实现如下:

    1. // `a.click()` doesn't work for all browsers (#465) 
    2. function click(node) { 
    3.   try { 
    4.     node.dispatchEvent(new MouseEvent("click")); 
    5.   } catch (e) { 
    6.     var evt = document.createEvent("MouseEvents"); 
    7.     evt.initMouseEvent( 
    8.       "click"truetrue, window, 0, 0, 0, 80, 20,  
    9.       falsefalsefalsefalse, 0, null 
    10.     ); 
    11.     node.dispatchEvent(evt); 
    12.   } 

    在 click 方法内部,会优先调用 node 对象上的 dispatchEvent 方法来派发 click 事件。当出现异常的时候,会在 catch 语句进行相应的异常处理,catch 语句中的 MouseEvent.initMouseEvent() 方法用于初始化鼠标事件的值。但需要注意的是,该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。

    3.1.2 blob 类型参数

    同样,在前面的示例中,我们演示了如何利用 saveAs 方法来保存 Blob 类型数据:

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

    blob 类型参数的处理逻辑,被定义在 saveAs 方法体的 else 分支中:

    1. // Use download attribute first if possible (#193 Lumia mobile) unless this is a macOS WebView 
    2. function saveAs(blob, name, opts) { 
    3.   var URL = _global.URL || _global.webkitURL; 
    4.   var a = document.createElement("a"); 
    5.   name = name || blob.name || "download"
    6.  
    7.   a.download = name
    8.   a.rel = "noopener"
    9.  
    10.   if (typeof blob === "string") { 
    11.      // 省略处理字符串类型参数 
    12.   } else { 
    13.     a.href = URL.createObjectURL(blob); 
    14.     setTimeout(function () { 
    15.       URL.revokeObjectURL(a.href); 
    16.     }, 4e4); // 40s 
    17.     setTimeout(function () { 
    18.       click(a); 
    19.     }, 0); 
    20.   } 

    对于 blob 类型的参数,首先会通过 createObjectURL 方法来创建 Object URL,然后在通过 click 方法执行文件保存。为了能及时释放内存,在 else 处理分支中,会启动一个定时器来执行清理操作。此时,方案一我们已经介绍完了,接下去要介绍的方案二主要是为了兼容 IE 浏览器。

    3.2 方案二

    在 Internet Explorer 10 浏览器中,msSaveBlob 和 msSaveOrOpenBlob 方法允许用户在客户端上保存文件,其中 msSaveBlob 方法只提供一个保存按钮,而 msSaveOrOpenBlob 方法提供了保存和打开按钮,对应的使用方式如下所示:

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

    了解完上述的知识和方案一中介绍的 corsEnabled、download 和 click 方法后,再来看方案二的代码,就很清晰明了。

    在满足 "msSaveOrOpenBlob" in navigator 条件时, FileSaver.js 会使用方案二来实现文件保存。跟前面一样,我们先来分析 字符串类型参数 的处理逻辑。

    3.2.1 字符串类型参数

    1. // Use msSaveOrOpenBlob as a second approach 
    2. function saveAs(blob, name, opts) { 
    3.   name = name || blob.name || "download"
    4.   if (typeof blob === "string") { 
    5.     if (corsEnabled(blob)) { // 判断是否支持CORS 
    6.       download(blob, name, opts); 
    7.     } else { 
    8.       var a = document.createElement("a"); 
    9.       a.href = blob; 
    10.       a.target = "_blank"
    11.       setTimeout(function () { 
    12.         click(a); 
    13.       }); 
    14.     } 
    15.   } else { 
    16.     // 省略处理Blob类型参数 
    17.   } 

    3.2.2 blob 类型参数

    1. // Use msSaveOrOpenBlob as a second approach 
    2. function saveAs(blob, name, opts) { 
    3.   name = name || blob.name || "download"
    4.   if (typeof blob === "string") { 
    5.     // 省略处理字符串类型参数 
    6.   } else { 
    7.     navigator.msSaveOrOpenBlob(bom(blob, opts), name); // 提供了保存和打开按钮 
    8.   } 

    3.3 方案三

    如果方案一和方案二都不支持的话,FileSaver.js 就会降级使用 FileReader API 和 open API 新开窗口来实现文件保存。

    3.3.1 字符串类型参数

    1. // Fallback to using FileReader and a popup 
    2. function saveAs(blob, name, opts, popup) { 
    3.   // Open a popup immediately do go around popup blocker 
    4.   // Mostly only available on user interaction and the fileReader is async so... 
    5.   popup = popup || open("""_blank"); 
    6.   if (popup) { 
    7.     popup.document.title = popup.document.body.innerText = "downloading..."
    8.   } 
    9.  
    10.   if (typeof blob === "string"return download(blob, name, opts); 
    11.  // 处理Blob类型参数 

    3.3.2 blob 类型参数

    对于 blob 类型的参数来说,在 saveAs 方法内部会根据不同的环境选用不同的方案,比如在 Safari 浏览器环境中,它会利用 FileReader API 先把 Blob 对象转换为 Data URL,然后再把该 Data URL 地址赋值给新开的窗口或当前窗口的 location 对象,具体的代码如下:

    1. // Fallback to using FileReader and a popup 
    2. function saveAs(blob, name, opts, popup) { 
    3.   // Open a popup immediately do go around popup blocker 
    4.   // Mostly only available on user interaction and the fileReader is async so... 
    5.   popup = popup || open("""_blank"); 
    6.   if (popup) { // 设置新开窗口的 
    7.     popup.document.title = popup.document.body.innerText = "downloading..."
    8.   } 
    9.  
    10.   if (typeof blob === "string"return download(blob, name, opts); 
    11.  
    12.   var force = blob.type === "application/octet-stream"; // 二进制流数据 
    13.   var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari; 
    14.   var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent); 
    15.  
    16.   if ( 
    17.     (isChromeIOS || (force && isSafari) || isMacOSWebView) && 
    18.     typeof FileReader !== "undefined" 
    19.   ) { 
    20.     // Safari doesn't allow downloading of blob URLs 
    21.     var reader = new FileReader(); 
    22.     reader.onloadend = function () { 
    23.       var url = reader.result; 
    24.       url = isChromeIOS 
    25.         ? url 
    26.         : url.replace(/^data:[^;]*;/, "data:attachment/file;"); // 处理成附件的形式 
    27.       if (popup) popup.location.href = url; 
    28.       else location = url; 
    29.       popup = null; // reverse-tabnabbing #460 
    30.     }; 
    31.     reader.readAsDataURL(blob); 
    32.   } else { 
    33.     // 省略Object URL的处理逻辑 
    34.   } 

    其实对于 FileReader API 来说,除了支持把 File/Blob 对象转换为 Data URL 之外,它还提供了 readAsArrayBuffer() 和 readAsText() 方法,用于把 File/Blob 对象转换为其它的数据格式。

    在 玩转前端二进制 文章中,阿宝哥详细介绍了 FileReader API 在前端图片处理场景中的应用,阅读完该文章之后,你们将能轻松看懂以下转换关系图:

     

    最后我们再来看一下 else 分支的代码:

    1. function saveAs(blob, name, opts, popup) { 
    2.   popup = popup || open("""_blank"); 
    3.   if (popup) { 
    4.     popup.document.title = popup.document.body.innerText = "downloading..."
    5.   } 
    6.  
    7.   // 处理字符串类型参数 
    8.   if (typeof blob === "string"return download(blob, name, opts); 
    9.  
    10.   if ( 
    11.     (isChromeIOS || (force && isSafari) || isMacOSWebView) && 
    12.     typeof FileReader !== "undefined" 
    13.   ) { 
    14.     // 省略FileReader API处理逻辑 
    15.   } else { 
    16.     var URL = _global.URL || _global.webkitURL; 
    17.     var url = URL.createObjectURL(blob); 
    18.     if (popup) popup.location = url; 
    19.     else location.href = url; 
    20.     popup = null; // reverse-tabnabbing #460 
    21.     setTimeout(function () { 
    22.       URL.revokeObjectURL(url); 
    23.     }, 4e4); // 40s 
    24.   } 

    到这里 FileSaver.js 这个库的源码已经分析完成了,跟着阿宝哥阅读上述源码之后,是不是觉得写一个兼容性好、简单易用的第三方库是多么不容易。

     

    在实际项目中,如果你需要保存超过 blob 大小限制的超大文件,或者没有足够的内存空间,你可以考虑使用更高级的 StreamSaver.js 库来实现文件保存功能。

     

    来源:全栈修仙之路内容投诉

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 历年真题答案解析
    • 备考技巧名师总结
    • 高频考点精准押题
    • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

      难度     813人已做
      查看
    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看
    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看
    • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

      难度     435人已做
      查看
    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机
    位置:首页-资讯-后端开发
    咦!没有更多了?去看看其它编程学习网 内容吧
    首页课程
    资料下载
    问答资讯