项目需求
前端项目开发中,有一个页面需要去整合多个服务接口返回的数据资源,并且需要将这多个服务接口接口返回的数据进行资源压缩,最终打包成zip压缩包,并在客户端完成下载。
基本需求梳理如下,
实现思路
这个需求点其实本质上还是传统的“文件下载”功能需求,常见的例如:excel导出、报表导出等,通常会在服务端优先将数据资源整理好,最终形成一个可供前端调用的接口,以文件流的形式实现文件的下载。
如上图所示,此处涉及到多个服务接口,该需求点的实现,不再依赖于后端,而是要在前端先做数据资源整合,对数据进行与处理之后,再完成页面渲染、zip文件导出,压力给到了前端。
JSZip
GitHub地址:How to use JSZip
JSZip是一个用于创建、读取和编辑zip文件的JavaScript脚本库,在浏览器的兼容性方面也做的十分友好,
An instance of JSZip represents a set of files. You can add them, remove them, modify them. You can also import an existing zip file or generate one.
如上所述,JSZip实例表示一个文件集合,可以对其进行文件的添加、移除、修改操作,也可以基于一个已有的zip文件来生成。
安装
JSZip安装方式如下,可以按需食用,
With npm : npm install jszip
With bower : bower install Stuk/jszip
With component : component install Stuk/jszip
Manually : download JSZip and include the file dist/jszip.js
or dist/jszip.min.js
使用
JSZip官网给出了一个使用例子,可以实现对txt文件+gif图片的zip压缩操作,并通过FileSaver.js完成下载操作。
var zip = new JSZip()