項目需求
前端項目開發中,有一個頁面需要去整合多個服務接口返回的數據資源,并且需要將這多個服務接口接口返回的數據進行資源壓縮,最終打包成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()