前端js处理接口返回的压缩包(亲测可用)

Posted JaxYoun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端js处理接口返回的压缩包(亲测可用)相关的知识,希望对你有一定的参考价值。

依赖jszip.js和FileSaver.js两个js库,可以到官网下载

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="./jquery3.5.1.js"></script>
    <script src="./jszip.min.js"></script>
    <script src="./FileSaver.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var xmlhttp;
            xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET", "http://192.168.xx.xx:xx/tasks/screenshots/120", true);  // 此接口返回一个压缩包,其中包含若干jpg格式的图片,本demo将图片展示到前台
            // xmlhttp.setRequestHeader("Authorization", "Bearer xxxx");  // 这是认证报头,按需
            xmlhttp.responseType = "blob";
			
            xmlhttp.onload = function () {
                if (this.status == 200) {
                    var blob = this.response;
                    var new_zip = new JSZip();
                    new_zip.loadAsync(blob).then(function (file) {
			var files = file.files;
			for (it in files) {
			var zipobj = files[it];
				if (!zipobj.dir) {
				      new_zip.file(it).async("blob").then(function (blob) {
				            var imgUrl = URL.createObjectURL(blob);
				            $("#kkk" ).attr("src", imgUrl);
				      });
				 }
			      }
			});
                }
            }
            xmlhttp.send();
        });
    </script>
</head>

<body>
	<img id="kkk" src=""/>
</body>

</html>

以上是关于前端js处理接口返回的压缩包(亲测可用)的主要内容,如果未能解决你的问题,请参考以下文章

js压缩图片后再将base64转换为file文件亲测可用

前端开发常用js代码片段

解决Chrome插件安装时出现的“程序包无效”问题亲测可用

解压.ZIP分卷文件(亲测可用)

前端开发中最常用的JS代码片段

Java下载多个文件打成压缩包返回输出流,并解决被JVM占用无法打开