前端-打壓縮包-下載

一、需求

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打包並下載