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

zhaolisha 2020-06-16

依赖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>
zhaolisha

zhaolisha

相关推荐

msxml3.dll 错误 800c0019 系统错误:-2146697191解决方法

一个asp后台使用了XMLHTTP组件的页面无法无法生成静态页面了，运行时提示"msxml3.dll 错误 '800c0019′" 系统错误:-2146697191 请查找行 数。之前一直以为是服务器配置或数据库的原因，或者IE浏览器有

hygbuaa / 0评论 2020-11-22

JavaScript-Runoob-AJAX：ASP/PHP 实例

AJAX 用于创造动态性更强的应用程序。下面的例子将为您演示当用户在输入框中键入字符时，网页如何与 web 服务器进行通信： 请在下面的输入框中键入字母：。当用户在上面的输入框中键入字符时，会执行函数 "showHint()" 。该函数

坚持着执着 / 0评论 2020-07-16

Vue 打包下载图片

FileSaver.saveAs; // 利用file-saver保存文件 自定义文件名

zkwgpp / 0评论 2020-06-16

Ajax(1) —— Ajax基础

Ajax即Asynchronous JavaScript and XML，是异步的JavaScript与XML。Ajax提供了基于服务器交换数据并实现局部更新网页的技术，在不重新加载整个网页的情况下，可以接受来自服务器请求到的数据，提高了浏览页面的效率和用

坚持着执着 / 0评论 2020-06-14

基于javascript处理二进制图片流过程详解

url += '&' + key + "=" + data[key];

87570495 / 0评论 2020-06-14

ajax

直白地说，就是没用AJAX的网页，你点一个按钮就要刷新一下页面，尽管新页面上只有一行字和当前页面不一样，但你还是要无聊地等待页面刷新。只要是JS调用异步通讯组件并使用格式化的数据来更新web页面上的内容或操作过程，那么我们用的方法就可算是AJAX。那么也可

李永毅 / 0评论 2020-05-29

PHP 实例 - AJAX RSS 阅读器

RSS 阅读器用于阅读 RSS Feed。在下面的实例中，我们将演示一个 RSS 阅读器，通过它，来自 RSS 的内容在网页不进行刷新的情况下被载入：。当用户在上面的下拉列表中选择某个 RSS-feed 时，会执行名为 "showRSS()&qu

malachuan / 0评论 2020-05-17

PHP - AJAX 与 PHP

AJAX 被用于创建交互性更强的应用程序。当用户在上面的输入框中键入字符时，会执行 "showHint()" 函数。该函数由 "onkeyup" 事件触发：。如果输入框是空的，该函数会清空 txtHint 占位符的内

Richardxx / 0评论 2020-05-16

JS端基于download.js实现图片、视频时直接下载而不是打开预览

const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];

87510793 / 0评论 2020-05-09

接口文档API、剖析http协议, 原生http请求函数

差别：get的参数拼接在url后面，(http://www.xx.com/?

knightwatch / 0评论 2020-05-09

AJAX初识

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。XMLHttpRequest 用于在后台与服务器交换数据。为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览

用不完的好奇心 / 0评论 2020-05-08

JSAJAX请求

//xmlHttp请求的状态有五种0，1，2，3，4。//当varxmlHttp=newXMLHttpRequest();这句执行完后，xmlHttp.readyState为0，表示对象存在。//调用open方法根据参数完成对象设置，并调用send方法发送

hygbuaa / 0评论 2020-02-20

python爬虫13--Ajax数据爬取

Ajax，Asynchronous JavaScript and XML，即异步的JavaScript和XML。它不是编程语言，而是利用JavaScript在保证页面不被刷新、页面链接不改变的情况下，与服务器交换数据并更新部分网页的技术。相当于前面pyth

zhaolisha / 0评论 2020-01-12

cordova+vue构建app进阶

message: `当前版本:${getnowVersion()}<br/>"最新版本:"${getVersion()}`

用不完的好奇心 / 0评论 2019-12-20

通过javascript&amp;&amp;ajax实现局部刷新

function showli_1(){ //通过一个按钮onclick触发函数。flag=1",true);//定义上传的方式，要传输的Servlet和？后

wanghongsha / 0评论 2019-12-15

Spring MVC+ajax进行信息验证的方法

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。所以ajax对于提升用户体验十分重要。　　这里需要注意：如果需要像 HTML 表单那样 POST 数据，请

83447400 / 0评论 2019-09-17

ajax入门

不会给后端发送请求。只会复制粘贴，原理啥的也不了解，现在的项目是用axios，但是axios是以Ajax+Promise为基础的，所以先学一波Ajax。Ajax可以做到局部刷新，无需重新刷新页面，拥有更好的用户体验。// {Param} async:tru

86520093 / 0评论 2019-11-18

http TRACE 跨站攻击 CVE-2003-1567
CVE-2004-2320
CVE-2010-0386

TRACE和TRACK是用来调试web服务器连接的HTTP方式。支持该方式的服务器存在跨站脚本漏洞，通常在描述各种浏览器缺陷的时候，把"Cross-Site-Tracing"简称为XST。攻击者可以利用此漏洞欺骗合法用户并得到他们的私人

89401052 / 0评论 2014-06-25

AJAX入门教程

果然还是花了点时间来看下AJAX的异步请求操作了，下面的介绍主要是针对AJAX小白，大牛悄悄的飘过。AJAX的全称是Asynchronous JavaScript and XML翻译过来是异步的JavaScript 和XML。含蓄的引用W3C的介绍。好吧，

heimeiyingwang / 0评论 2015-03-19

ajax

string：仅用于 POST 请求3、响应每当 readyState 改变时，就会触发 onreadystatechange 事件。

AJAXBloger / 0评论 2015-04-13

Ajax Post数据提交时加号变空格的解决办法

采用Ajax传递数据时，通常会将数据整理为data="var1=abc&var2=def"。而当数据中存在加号(+)或是连接符(&)时，服务器端接收数据时会有部分数据丢失现象。　　分析一下Ajax传递数据的格式与Java

sunnyishere / 0评论 2016-04-15

初识Ajax（一）

初步认识Ajax浅谈他们的基本知识。因为兼容性问题一般写成这样：。1）HTTP请求的方法或动作。对所发送信息的数量也有限制，一般在2000个字符以内。2>POST请求：修改服务器资源。http状态码由3位数字构成，其中首位数字定义了状态码类型。1xx

learningever / 0评论 2017-05-07

21.1 XMLHttpRequest 对象【JavaScript高级程序设计第三版】

IE5 是第一款引入XHR 对象的浏览器。在IE5 中，XHR 对象是通过MSXML 库中的一个ActiveX对象实现的。因此，在IE 中可能会遇到三种不同版本的XHR 对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和MXSM

无材可去补苍天 / 0评论 2017-05-25

自己封装一个简单的ajax插件

var xmlHttp; //保存xmlHttpRequest对象。var cache = obj.cache || false; //get时是否使用缓存,默认否。var success = ob

雁南飞 / 0评论 2018-01-20

初涉ajax+jsp

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用

levysnail / 0评论 2017-11-23

echarts生成图片另存到服务器上

setTimeout;//切记：一定设置这个延迟，否则生成的图片是黑色的。

87221942 / 0评论 2018-11-03

ajaxday2 ajax json xstream

第三部分：AJAX 异步 JavaScript和 XML ---- 不是一种新的编程语言 AJAX = DHTML + XHR （在HTML、CSS、JS 基础上 添加 XMLHttpRequest ）传统web方式：浏览器直接将请求发送给服务器，提交请求

82443365 / 0评论 2014-05-02

基于restful 风格的 web service

总的来说，SOAP的WebService解决方案虽然较为成熟，且安全性较好，但是使用门槛较高，在大并发情况下会有性能问题，在互联网上使用不太普及，因此并不太适合Web2.0网站服务使用，目前大量的Web2.0网站使用另外一种解决方案——REST。　　RES

luanjun / 0评论 2013-06-13

自己编写ajax步骤

在 IE 5 和 IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数). 第一个参数可取值get或post;第三个参数为是否采用异步，使用ajax绝对是true的啦。if { /当状态为 200 的它是 "OK&

fengziboy / 0评论 2015-06-10

以支持多种浏览器的方式创建 XMLHttpRequest 对象

/* Create a new XMLHttpRequest object to talk to the Web server */. 现在先不管那些注释掉的奇怪符号，如@cc_on，这是特殊的JavaScript编译器命令，将在下一期针对XMLHttpR

81530694 / 0评论 2011-09-27

ajax跨域的基本流程

用JavaScript写一个完整的AJAX代码并不复杂，但是需要注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。创建XMLHttpRequest对象，也就是创建一个异步调用对象；判断XHR对象属性；创建一个新的HTTP请求，并指定该HTT

86193952 / 0评论 2019-07-09

走进前端开发——框架的演变

对于大多数前端框架，我想聊一聊，这些前端框架从何而来，解决了什么问题，又有哪些高明之处。认识了解问题，切忌一头扎进去研究而未了解其全貌。为此，我们追溯到20世纪90年代，网景浏览器横空出世，占据了浏览器市场第一的份额。那时的网景浏览器已经搭载了 Cooki

小猴 / 0评论 2019-07-01

JS构建表单

* @param hidData Object { 'account': 'show tables ;'} ;xmlhttp.send ; //内容格式根据Content-type设置的格式而定

84487600 / 0评论 2019-07-01

通信类

什么是同源策略同源策略会限制从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。是一个隔离潜在恶意文档的关键安全机制。同源策略的限制Cookie、LocalStorage和IndexDB无法读取。Ajax请求不能发送。//ajax只适合同源，不能适

81493369 / 0评论 2019-07-01

Ajax Fetch 和 Axios(持续更新中...)

JavaScript 代码都是单线程执行的，由于这个“缺陷”，导致 JavaScript 的所有网络操作，浏览器事件，都必须是异步执行。async await 是 Promise 语法糖，使异步的逻辑书写标准的同步函数Fetch 是一个现代的概念, 等同于

zzrshuiwuhen / 0评论 2019-07-01

每日两道前端面试题 - 20190131

IE和DOM 事件模型之间存在哪些主要差别1 - 冒泡型事件事件按照从最特定的事件目标到最不特定的事件目标的顺序触发IE 5.5 div -> body -> documentIE 6.0 div -> body -> docume

89241846 / 0评论 2019-06-30

js封装 Ajax ——常用工具函数

* @param {string}opt.method http连接的方式，包括POST和GET两种方式。* @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的。opt.dataType = opt.d

81493369 / 0评论 2019-06-30

php curl发送post请求，向接口发送请求并返回数据。

在微信开发中，很多请求都是用curl实现的，并不是跳转的curl或者ajax。<button type="button" onclick="loadXMLDoc()">请求数据</button>

azhedashuaibi / 0评论 2019-06-29

【web前端】花瓣画板分类归档查看工具

花瓣是国内最大的图片分享网站，部分用户长期以来都有对个人主页的画板按字母顺序进行归档的需求，但花瓣官方一直没有支持这个能力。实际上使用这个工具时只在自己的主页生效。安装和使用安装chrome扩展TamperMonkey安装花瓣画板归档脚本打开自己的画板查看

86520093 / 0评论 2019-06-29

AJAX异步请求

if (typeof ActiveXObject != "undefined") {. 'Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.3.0','Msxml2.XML

DreamPig / 0评论 2019-06-29

自己封装一个简单的ajax插件

var xmlHttp; //保存xmlHttpRequest对象。var cache = obj.cache || false; //get时是否使用缓存,默认否。var success = ob

Chydar / 0评论 2018-01-20

初识Ajax（一）

初步认识Ajax浅谈他们的基本知识。因为兼容性问题一般写成这样：。对所发送信息的数量也有限制，一般在2000个字符以内。2>POST请求：修改服务器资源。对所发信息的数量无限制。http状态码由3位数字构成，其中首位数字定义了状态码类型。1xx：信息

87241548 / 0评论 2017-05-07

高程3总结#第21章Ajax与Comet

}这个函数会尽力根据IE中可用的MSXML库的情况创建最新版本的XHR对象IE7+、Firefox、Opera、Chrome、Safari都支持原生的XHR对象，这些浏览器中创建XHR对象，可以使用XMLHttpRequest构造函数。var xhr=ne

Chydar / 0评论 2019-06-28

XMLHTTPRequest的属性和方法简介

最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。来自MSDN的解释：

liqing00 / 0评论 2012-07-11

JavaScript倒计时获取服务器时间

varxmlHttp=newXMLHttpRequest();if(!xmlHttp){. xmlHttp=newActiveXObject("Microsoft.XMLHTTP");xmlHttp.open("HEAD&qu

homehttp / 0评论 2016-11-29

零基础通过Ajax实现网易云音乐数据交互(4)

数据交互，应该是一个老生常谈的问题了，可是十几年过去了，这个简单却又重要的问题，依然是很多人面试和实际工作中的心病。从我对某个招聘网站的不完全统计，超过60%的招聘需求都对ajax有明确的需求。原因两个，第一，是这个问题单纯会js搞不定。这个不像轮播图，你

84487600 / 0评论 2019-06-28

如何创建和使用XMLHttpRequest对象？

创建XMLHttpRequest对象，我有以下几种方法，顺带给大家介绍下他们的使用，一起来看看那吧。直接new的方式，这样我们就构造了这个对象。　但是，这个语句只针对Firefox，opera以及Safari等高级浏览器。我们可以提示它，浏览器不支持aja

zergxixi / 0评论 2016-10-31

AJAX实现步骤,XMLHttpRequest对象的方法

alert("你所请求的页面有异常。

homehttp / 0评论 2016-10-07

浏览器缓存清除

浏览器缓存，有时候我们需要他，因为他可以提高网站性能和浏览器速度，提高网站性能。但是有时候我们又不得不清除缓存，因为缓存可能误事，出现一些错误的数据。像股票类网站实时更新等，这样的网站是不要缓存的，像有的网站很少更新，有缓存还是比较好的。今天主要介绍清除缓

88530891 / 0评论 2016-09-28