基于Jquery EasyUI JSZip FileSaver的简单使用

一、前言

在前端的项目开发中 ，下载文件压缩包是很重要的一个环节，那么怎么下载多个文件并压缩成ZIP下载呢？

二、使用步骤

1、引用库

<script type="text/javascript" src="~/Scripts/comm/jszip.min.js" ></script><script type="text/javascript" src="~/Scripts/comm/FileSaver.min.js" ></script>

库下载地址：https://download.csdn.net/download/u012949335/88088658 

2、简单使用方法

var zip = new JSZip();
var zipName = "test";
var fileFolder = zip.folder(zipName);
fileFolder.file(fileList[k].name, fileList[k].content, {binary: true //二进制});
zip.generateAsync({type: 'blob'}).then(function(content){saveAs(content, zipName+'.zip');});

 3、封装高级用法

/**
*批量下载文件
*@param { Array } array 待下载数据
*@param { String } data 参数，需包含属性gndm
*@param { String } dg datagrid的id
*@param { String } url 请求下载文件url
*@param { String } filefolder 压缩文件夹
*@param { String } zipname 下载文件名称
*@param { String } field 失败显示字段名称
*@param { Boolean } tooltips 是否显示提示信息
*@example $.ajaxRecursionZipDownFile({ array: infolist, data: { "gndm": gndm }, datagrid: "XX", url: 'XXXX', filefolder: "XX附件", zipname: "XX附件.zip", field: "xh" });
*/
jQuery.ajaxRecursionZipDownFile = function (option) {if (typeof option === 'undefined') throw new Error("Please pass parameters");if (typeof option.url === 'undefined') throw new Error("Please pass parameters url");if (typeof option.array === 'undefined') throw new Error("Please pass parameters array");if (typeof option.field === 'undefined' || option.field === null) option.field = "xh";option.data = option.data || {};if (option.data.hasOwnProperty('gndm') === false) throw new Error("Please pass parameters data->gndm");option.zipname = option.zipname || "附件";option.filefolder = option.filefolder || "附件";option.tooltips = option.tooltips || false;var zip = new JSZip();var fileFolder = zip.folder(option.filefolder);var fileName = '';var _currentIndex = 0;var _successIndex = 0;var _faileXhInfo = '';var _currentTotal = option.array.length;pageLoadDown();function _recursionZipDownFiles() {if (_currentIndex >= _currentTotal) {zip.generateAsync({ type: 'blob' }).then(function (content) {saveAs(content, option.zipname);dispageload();var msg = "压缩成功：" + _successIndex.toString() + "个。失败数据：" + (_faileXhInfo || "无。");if (option.datagrid) $('#' + option.datagrid).datagrid('clearChecked');if (option.tooltips === true) {$.messager.alert('提示', msg, 'infoxx');if (!this._endmessagertimeout) {window.clearTimeout(this._endmessagertimeout);}this._endmessagertimeout = setTimeout("$(\".messager-body\").window('close');", 1000);}});return false;}var jsonObject = JSON.stringify(option.array[_currentIndex]);var _objdata = option.data;_objdata.json = jsonObject;axios({method: 'post',url: option.url,data: _objdata,responseType: 'blob'}).then(function (res) {var data = res.data;var reqHeader = res.headers;if (reqHeader["content-disposition"]) fileName = decodeURI(reqHeader["content-disposition"]).split('; ')[1].split('filename=')[1];if (data.size > 0) {fileFolder.file(fileName, data, { binary: true });_successIndex++;} else {_faileXhInfo += option.array[_currentIndex][option.field] + ";";}_currentIndex++;_changeProcess(Math.round((_currentIndex / _currentTotal) * 100));_recursionZipDownFiles(option.array, option.data.gndm);}, function (err) {_currentIndex++;_faileXhInfo += option.array[_currentIndex][option.field] + ";";_changeProcess(Math.round((_currentIndex / _currentTotal) * 100));});}_recursionZipDownFiles();
}

4、调用示例

 function getFilesZipDownInfo(gndm) {var rows = $("#dg").datagrid('getChecked');if (rows.length == 0) {$.messager.alert('提示', "请选择要下载的数据！", "error");return;}var infolist = [];$.each(rows, function (index, row) {var info = new Object();info.idxx = row.idxx;info.fjmcxx = row.fjmcxx;infolist.push(info);});$.ajaxRecursionZipDownFile({array: infolist,data: { "gndm": gndm },datagrid: "dg",url: 'downfile',filefolder: "实验报告附件",zipname: "实验报告附件.zip",field: "idxx",tooltips: true});}

5、效果展示