前言
files-download-zip 是一个可以将多个文件打包成 zip 文件并下载的 npm 包。它可以方便地在前端项目中使用，将多个文件客户端打包成一个 zip 文件进行下载，比如网站中可以整理好某个用户的相关文件然后打包下载，或者提交作业的时候打包下载所有文件。
本文将详细介绍 npm 包 files-download-zip 的使用方法，包括安装和基本使用，还有示例代码及对其源代码进行一定的解读，以指导读者使用该 npm 包进行项目开发。
安装
使用 npm 命令进行安装，命令如下：
npm install files-download-zip
基本使用
使用方法十分简单，只需要引入该 npm 包，然后直接调用它提供的方法即可。方法的基本参数包括文件名、文件 URL 地址等，因此需要将所有需要打包下载的文件 URL 地址和文件名称存储在数组中，然后传入该方法中即可实现文件的打包下载。
示例代码如下：
-- -------------------- ---- ------- ------ ---------------- ---- --------------------- ----- ----- - - - ----- ------------ ---- ---------------------- -- - ----- ------------ ---- ---------------------- -- - ----- ------------ ---- ---------------------- -- -- ------------------------
在这个示例里，我们将三个文件的 URL 地址和文件名称存储在了一个数组里，然后直接传给了 filesDownloadZip 方法。方法会将这些文件自动打包成一个 zip 文件，然后在浏览器中下载。
如果直接使用该 npm 包提供的默认下载 API，会弹出一个自动命名的下载窗口，这可能不是项目中想要的结果。如果需要自定义文件名和下载方式，需要对其源代码进行一定的修改。
##源代码解读
该 npm 包的源代码位于以下位置，也可以使用 npm 安装后自行查看：
node_modules/files-download-zip/src/files-download-zip.js
在该源代码中，提供了两个函数，分别是 filesDownloadZip 和 downloadZipFile。其中，filesDownloadZip 是默认 API，只负责处理文件的数组，实现多个文件打包下载；而 downloadZipFile 是文件下载 API，提供了文件名自定义和下载方式自定义的功能。
filesDownloadZip
函数定义如下：
-- -------------------- ---- -------
-------- ----------------------- --------- -
-- ------
----- ---- - -------------- -- ----------
-- ------
------------------------ -- ----------------
----------- -- -------------------- ----------
------------ -- ----------------------
-该函数只有两个参数，分别是文件数组和文件名，其中文件数组是必须的传入参数。首先将文件数组中的所有文件 URL 地址提前处理好，然后使用 Promise.all 方法将所有文件 URL 转化为 blob 对象，最后将转化后的文件 blobs 打包成zip文件并下载，该过程由 downloadBlobs 方法实现。
downloadZipFile
函数定义如下：
-- -------------------- ---- -------
-------- ---------------------- --------- -------- -
-- - ------- ------- --- -----
----- ------- - ----------------- ---------
-- --- ------- --
----- ------ - ------------------------------
-- ------
----- ---- - -------------- -- ----------
-- --------
----- --------- - ---------------------------------------
-- -- ---- ---- --- --
--------------------- - ----- -------- -- - ------------- ------ --
-------------- -- -
--------------------------- ----------
--
------------ -- --------------------- ----- ------- --------
-该函数主要是实现自定义文件名和下载方式的功能。参数包括文件数组、文件名和一个 options 对象。该方法使用了 Axios 库，该库可以发起 Http 请求，因此使用 Axios 库向后端接口提交数据，后端将所有 URL 地址依次写入到服务器的一个临时文件中（node.js stream 实现），最终返回下载文件的二进制流并打成 zip 包，前端通过 ResponseType 设置为 blob 进行接收，最后调用 downloadBlob 方法实现下载。
结语
files-download-zip 是一个非常实用的前端开发工具，可以将多个文件打包成 zip 文件并在浏览器中下载，使用很方便。本文通过详细的介绍和示例代码，以及对该 npm 包源代码的解读，介绍了 files-download-zip 的基本使用方法和自定义文件名和下载方式的实现。读者可以参考本文进行相关项目的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731581e8991b448e9409