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-streamresponse.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());// 這里是查詢數據庫 List<Map> result = service.downloadCerts(ids); byte[] buffer = new byte[10240]; for (Map map :result) { //因為數據庫保存的是圖片的base64 所以需要轉換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 轉換成了圖片//往zip里面壓入第一個文件 本地文件resultStream.putNextEntry(new ZipEntry('本地圖片.png' ));InputStream stream = new FileInputStream(new File('temp.png'));int len;// 讀入需要下載的文件的內容，打包到zip文件while ((len = stream.read(buffer)) > 0) { resultStream.write(buffer, 0, len);}resultStream.closeEntry();stream.close();resultStream.flush();//第一個文件壓入完成 關閉流 刷新一下緩沖區// 往zip里面壓入第二個文件 網絡文件 例：https://profile.csdnimg.cn/8/C/E/3_blogdevteamresultStream.putNextEntry(new ZipEntry('網絡圖片.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();// 讀入需要下載的文件的內容，打包到zip文件while ((len = backStream.read(buffer)) > 0) { resultStream.write(buffer, 0, len);}resultStream.closeEntry();backStream.close();resultStream.flush();//第二個文件壓入完成 關閉流 刷新一下緩沖區 } resultStream.close(); //關閉流} 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('下載出錯了');}});

這里的 download(this.ids) 是封裝過的axios 重點是 then里的代碼

問題

如果你發現下載的文件比源文件大，很可能是前端請求需要加入以下代碼

responseType:'blob',

注意：筆者在測試過程中發現一些網站帶有防盜鏈功能，需要referer驗證。另外還可能會出現前端blob格式轉換、跨域等諸多問題 ，需要讀者酌情處理。