快捷導(dǎo)航

前端ajax請求+后端java實現(xiàn)的下載zip壓縮包功能示例

更新時間：2023年05月27日 09:14:21 作者：Tzyy皮皮

這篇文章主要介紹了前端ajax請求+后端java實現(xiàn)的下載zip壓縮包功能,結(jié)合實例形式分析了ajax請求交互與后端圖片zip格式壓縮并下載功能相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

ajax請求下載zip壓縮包

后臺最主要是 response.setContentType(“application/octet-stream”);
以及 response.addHeader(“Content-Disposition”, “attachment;fileName=” + URLEncoder.encode(“圖片.zip”, “UTF-8”));

一、后臺代碼

@PostMapping("/downloadZip")
    public void downloadCerts(HttpServletRequest request, HttpServletResponse response, @RequestBody List<String> ids) throws UnsupportedEncodingException {
    	//文件流octet-stream
        response.setContentType("application/octet-stream");
        response.setCharacterEncoding("utf-8");
        response.addHeader("Content-Disposition", "attachment;fileName=" + URLEncoder.encode("圖片.zip", "UTF-8"));
        try {
            ZipOutputStream resultStream = new ZipOutputStream(response.getOutputStream());
			// 這里是查詢數(shù)據(jù)庫
            List<Map> result = service.downloadCerts(ids);
            byte[] buffer = new byte[10240];
            for (Map map :result) {
            	//因為數(shù)據(jù)庫保存的是圖片的base64 所以需要轉(zhuǎn)換
                BASE64Decoder decoder = new BASE64Decoder();
                File certFace = new File("temp.png");
                OutputStream out = new FileOutputStream(certFace);
                byte[] b = decoder.decodeBuffer(((String) map.get("certB64")).split(",")[1]);
                for (int i = 0; i <b.length ; i++) {
                    if (b[i] <0) {
                        b[i]+=256;
                    }
                }
                out.write(b);
                out.flush();
                out.close();
                //到這里 base64 轉(zhuǎn)換成了圖片
				//往zip里面壓入第一個文件  本地文件
                resultStream.putNextEntry(new ZipEntry("本地圖片.png" ));
                InputStream stream = new FileInputStream(new File("temp.png"));
                int len;
                // 讀入需要下載的文件的內(nèi)容，打包到zip文件
                while ((len = stream.read(buffer)) > 0) {
                    resultStream.write(buffer, 0, len);
                }
                resultStream.closeEntry();
                stream.close();
                resultStream.flush();
                //第一個文件壓入完成 關(guān)閉流 刷新一下緩沖區(qū)
                // 往zip里面壓入第二個文件  網(wǎng)絡(luò)文件 例：https://profile.csdnimg.cn/8/C/E/3_blogdevteam
                resultStream.putNextEntry(new ZipEntry("網(wǎng)絡(luò)圖片.png"));
                URL url = new URL("https://profile.csdnimg.cn/8/C/E/3_blogdevteam";);
                String str = url.toString();
                URLConnection connection = url.openConnection();
                InputStream backStream = connection.getInputStream();
                // 讀入需要下載的文件的內(nèi)容，打包到zip文件
                while ((len = backStream.read(buffer)) > 0) {
                    resultStream.write(buffer, 0, len);
                }
                resultStream.closeEntry();
                backStream.close();
                resultStream.flush();
				//第二個文件壓入完成 關(guān)閉流 刷新一下緩沖區(qū)
            }
            resultStream.close();
            //關(guān)閉流
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

二、前端代碼

前端代碼比較簡單直接貼出我使用的是vue的 axios

download(this.ids).then((response) =>{
	if (response.status == 200) {
	    let url = window.URL.createObjectURL(new Blob([response.data]))
	    let link= document.createElement('a')
	    link.style.display='none'
	    link.href=url
	    link.setAttribute('download', "圖片.zip")    // 自定義下載文件名（如exemple.txt）
	    document.body.appendChild(link)
	    link.click()
	}else{
	    this.$message.error("下載出錯了");
	}
});