前端ajax请求+后端java实现的下载zip压缩包功能示例

 更新时间:2023年05月27日 09:14:21   作者:Tzyy皮皮  
这篇文章主要介绍了前端ajax请求+后端java实现的下载zip压缩包功能,结合实例形式分析了ajax请求交互与后端图片zip格式压缩并下载功能相关实现技巧,需要的朋友可以参考下

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());
			// 这里是查询数据库
            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_blogdevteam
                resultStream.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格式转换、跨域等诸多问题 ,需要读者酌情处理。

相关文章

  • Ajax登陆使用Spring Security缓存跳转到登陆前的链接

    Ajax登陆使用Spring Security缓存跳转到登陆前的链接

    这篇文章主要介绍了Ajax登陆使用Spring Security缓存跳转到登陆前的链接,需要的朋友可以参考下
    2019-04-04
  • Struts2和Ajax数据交互示例详解

    Struts2和Ajax数据交互示例详解

    这篇文章主要给大家介绍了关于Struts2和Ajax数据交互的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • 在(ASP/PHP/JSP/html/js)中禁止ajax缓存的方法集锦

    在(ASP/PHP/JSP/html/js)中禁止ajax缓存的方法集锦

    禁止ajax缓存最简单的办法就是在js端直接生成一个随机数了,但是有时会发现此方法不适用于post了,如果我们要禁止post 提交数据的ajax缓存需要怎么处理呢,下面我整理了很多关于禁止ajax缓存的例子
    2014-08-08
  • Ajax工作原理深入理解

    Ajax工作原理深入理解

    ajax是异步的意思,它有别于传统web开发中采用的同步的方式。异步传输是面向字符的传输,它的单位是字符;而同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的
    2013-08-08
  • Ajax获取响应内容长度的方法

    Ajax获取响应内容长度的方法

    这篇文章主要介绍了Ajax获取响应内容长度的方法,涉及Ajax调用成功后返回方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • Ajax 超时检查脚本

    Ajax 超时检查脚本

    检查Ajax 是否超时的脚本代码
    2009-07-07
  • ajax设置header指南教程

    ajax设置header指南教程

    Ajax 是一个令人误导的名称,Ajax 应用程序可能使用 XML 来传输数据,但将数据作为纯文本或 JSON 文本传输也同样常见,本文给大家介绍ajax设置header指南教程,感兴趣的朋友一起看看吧
    2023-10-10
  • jquery ajax实现文件上传功能实例代码

    jquery ajax实现文件上传功能实例代码

    这篇文章主要介绍了jquery ajax实现文件拖拽上传功能的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • 用iframe设置代理解决ajax跨域请求问题

    用iframe设置代理解决ajax跨域请求问题

    面对ajax跨域请求的问题,想用代理的方式来解决这个跨域问题。在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理
    2013-11-11
  • AJAX的原理—如何做到异步和局部刷新【实现代码】

    AJAX的原理—如何做到异步和局部刷新【实现代码】

    如何做到异步和局部刷新?下面小编就为大家带来一篇AJAX的原理—如何做到异步和局部刷新【实现代码】。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论