前端-打压缩包-下载

一、需求

mysql表中存储了可执行的脚本与执行后的报告两个字段，需要将这两个字段的内容写到两个文件中，并打成压缩包下载到本地。

二、实现

1、需要的js包：

使用jszip这个项目实现的： https://github.com/Stuk/jszip

压缩和未压缩的JS文件都在 dist目录下，大家自行下载。

2、引入js

<script src="./jszip.min.js"></script>

3、前端发送ajax请求，查询需要下载的文件内容并解析

function downloadZipFile(){
        var row = $('#dg').datagrid('getSelected');
        var requestFileName = row.requestFileName;
        var resultFileName = row.resultFileName;
        if (null != row) {
            $.ajax({
                url:"${basePath}/jmeterCaseExeLog/downloadZipScript?exeLogId="+row.id,
                dataType:"json",
                success:function (res) {
                    if (res.header.flag) {
                        var context = res.body;
                        var xmlData = JSON.parse(context);
                        var array = new Array();
                        array.push({fileName:requestFileName,content:xmlData.requestData});
                        array.push({fileName:resultFileName,content:xmlData.resultData});
                        //zip压缩包的文件名为当前执行记录id_jmx脚本名称
                        downloadZip(row.id+"_"+requestFileName,array);
                    } else {
                        Notify(res.header.msg, 'top-right', '5000', 'danger', 'fa-bolt', true);
                    }
                }
            });
        }
    }

4、java代码从mysql查询到数据包装后返回给前端

 @RequestMapping("downloadZipScript")
 @ResponseBody
 public Object downloadZipScript(HttpServletRequest request ,Integer exeLogId){
     try {
         TmpJmeterExeLogPo tmpJmeterExeLogPo = jmeterExeLogService.getById(exeLogId);
         String requestData = tmpJmeterExeLogPo.getRequestData();
         String resultData = tmpJmeterExeLogPo.getResultData();
         Map map = new HashMap();
         map.put("requestData",requestData);
         map.put("resultData",resultData);
         String xmlData = JSON.toJSONString(map);
         return success(xmlData);
     }catch (Exception e){
         return error("500","下载文件失败");
     }
 }

5、前端解析返回的结果，并打包下载

/**
 * 下载文件并打包成zip压缩包
 * @param zipName
 * @param arrayData
 */
function downloadZip(zipName,arrayData) {
    // arrayData是个数组
    // 数组项结构 {name: "xxx", content: "..."}
    var zip = new JSZip();
    arrayData.forEach(function (obj) {
        // zip包里面不断塞svg文件
        zip.file(obj.fileName, obj.content);
    });
    // 生成zip文件并下载
    zip.generateAsync({
        type: 'blob'
    }).then(function(content) {
        // 下载的文件名
        var filename = zipName + '.zip';
        // 创建隐藏的可下载链接
        var eleLink = document.createElement('a');
        eleLink.download = filename;
        eleLink.style.display = 'none';
        // 下载内容转变成blob地址
        eleLink.href = URL.createObjectURL(content);
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
    });
}

三、参考博客

js实现zip打包并下载