关键词：

文章目录

• 目的
• 实现（方案一）
• • 原理
  • • JavaEE中的Cookie操作
    • • 创建Cookie
      • 修改Cookie
      • 销毁Cookie
      • 发送Cookie
    • JS中的Cookie操作
    • • document.cookie
  • 示例
• 实现（方案二）
• • 原理
  • • XMLHttpRequest.send()
    • XMLHttpRequest.onreadystatechange
    • XMLHttpRequest.responseType
    • escape()
    • decodeURIComponent()
  • 示例

目的

在实现文件导出时，若文件过大导出时间过长，此时就需要有提示框提示用户当前导出的状态，在导出功能结束后有相应的提示。

实现（方案一）

在文件导出的过程中向浏览器添加Cookie，在前端定时检测Cookie状态，若检测到指定的Cookie值，即表示导出完成并关闭定时器。

原理

JavaEE中的Cookie操作

创建Cookie

可以通过Cookie的构造函数直接创建Cookie，例如：

Cookie cookie = new Cookie("CookieName", "CookieValue");

该构造方法包含两个参数，第一个参数为Cookie的名称，Cookie的名称一旦被创建则不允许对其修改，第二个参数为Cookie的值，如果需要修改该值，可以调用Cookie的setValue()方法进行修改。

创建Cookie时可以通过setPath(String url)方法设置该Cookie的存放路径。Cookie对指定目录的所有页面及其目录下的子目录中的页面都是可以访问的。每个Cookie的路径都应符合Servlet的访问路径。

getPath()方法获取Cookie的路径。

修改Cookie

首先可以通过HttpServletRequest类中的Cookie[] getCookies()方法获取所有的Cookie。通过Cookie的名称找到需要修改的Cookie值，再对该Cookie使用setValue(String newValue)方法对该Cookie的值进行修改。示例：

// 获取该请求的所有Cookie
Cookie[] cookies = request.getCookies();

for (int i = 0; i < cookies.length; i++) 
	if ("CookieName".equals(cookies[i].getValue())) 
		cookies[i].setValue("newValue");
	

销毁Cookie

Cookie未提供直接的删除方法，但是可以通过设置Cookie的存活时间来销毁一个Cookie。每一个Cookie都有其对应的存活时间，未单独设置时默认值为-1，当设置存活时间为负数时，该Cookie不能长久储存当浏览器退出时该Cookie会自动销毁。当设置为0时该Cookie则会马上被销毁。示例：

Cookie cookie = new Cookie("CookieName", "CookieValue");
cookie.setMaxAge(0);

response.addCookie(cookie);

发送Cookie

创建好的Cookie可以随HttpServletResponse响应发送回前端页面，可以调取HttpServletResponse的addCookie(Cookie cookie)方法，将Cookie添加到响应中。示例：

Cookie cookie = new Cookie("CookieName", "CookieValue");
cookie.setPath("/");
response.addCookie(cookie);

JS中的Cookie操作

document.cookie

在JS中可以使用document.cookie读取和新增Cookie，它作为Cookie的getter和setter方法。

// 创建Cookie
document.cookie = "key=value;max-age=60*60*1;path=/;";

// 修改Cookie
document.cookie = "key=newValue";

// 销毁Cookie
document.cookie = "key=newValue;expires=" + new Date(0).toUTCString();

在创建或修改Cookie时，可以使用以下的属性对Cookie进行设置。

• path=path：设置Cookie的访问路径
• max-age=max-age-in-seconds：设置Cookie的存活时间
• expires=date-in-GMTString-format：设置Cookie到期时间，指定确切的时间节点。

前端的Cookie同后台一样，没有直接删除Cookie的方法，也是通过设置存活时间或到期时间来强制销毁Cookie。

处于安全性考虑，每一个Cookie都应设置自己的到期时间。

示例

后台代码（Java）

// 向响应中添加导出内容
response.setContentType("application/vnd.ms-excel");
response.addHeader("Content-disposition", "attachment; filename=" + fileName + ".xlsx");

OutputStream os = response.getOutputStream();
// 将需要下载的加载到输入流中
FileInputStream is = new FileInputStream();

// 添加Cookie
Cookie cookie = new Cookie("downloadExcelStatus", "finished");
cookie.setPath("/");
response.addCookie(cookie);

// 输出文件
byte[] b = new byte[1024];
int i = 0;

while ((i = is.read(b)) > 0) 
	os.write(b, 0, i);

前端JS

// 获取后台设置的Cookie值
var getCookie = function (cookieName) 
	var strCookie = document.cookie;
	var arrCookie = strCookie.split(";");
	for (var i = 0; i < arrCookie.length; i++) 
	    var arr = arrCookie[i].split("=");
	    if (cookieName === arr[0]) 
	        return arr[1];
	    
	


// 定时检查接口状态
var checkDownloadFlag = function () 
	// 打开提示框
    $("#showLoading").modal("show");

    var downloadFlag = setInterval(function () 
        var token = getCookie("downloadExcelStatus");
        if (token === "finished" && token) 
            clearInterval(downloadFlag);
            $("#showLoading").modal("hide");
            // 当检测到下载完成后销毁Cookie
            document.cookie = "downloadExcelStatus=wait;expires=" + new Date(0).toUTCString() + ";path=/";
        
    , 5000);

实现（方案二）

在与后台交互的过程中，使用Ajax的过程只能检测状态码，请求成功后就会调用success方法，而表单提交更加无法检测请求状态。所以想要监测请求的状态，可以使用JS的XMLHttpRequest类的onreadystatechange()方法实时监测请求的状态。

XMLHttpRequest (XHR)对象用于与服务器交互。您可以从URL检索数据，而不必进行整个页面刷新。这使得Web页面可以只更新页面的一部分，而不会干扰用户正在进行的操作。

AJAX编程中大量使用XMLHttpRequest。

AJAX相关操作

原理

XMLHttpRequest.send()

该方法用于将请求发送给服务端。如果请求类型为POST可以在send()方法中添加需要发送给后台的参数信息。send()方法的参数支持BLOB、document、FormData、String、URLSearchParams、BufferSource等类型的数据。示例：

// 创建FormData类型数据并向其添加参数
var formData = new FormData();
formData.append("key", "value");

var xmlHttp = new XMLHttpRequest();

xmlHttp.open("post", url, true);
xmlHttp.send(formData);

XMLHttpRequest.onreadystatechange

每当readyState属性更改时调用的事件处理程序。从用户界面线程调用回调。XMLHttpRequest.onreadystatechange属性包含了当readystatechange事件被触发时要调用的事件处理程序，也就是每次XMLHttpRequest的readyState属性改变时。

该方法不能用于同步请求

当监测到请求响应状态为4时，则表示该请求已被处理完毕并前端已接收到响应文本。示例：

var xhr = new XMLHttpRequest();

xhr.open("GET", url, true);
xhr.send();

xhr.onreadstatechange = function() 
	if(xhr.readyStatus === XMLHttpRequest.DONE && xhr.status === 200) 
		console.log(xhr.requestText());
	

XMLHttpRequest.responseType

XMLHttpRequest属性responseType是一个枚举字符串值，指定响应中包含的数据类型。

该属性可以设置响应返回的数据类型，可以将其设置为arraybuffer、blob、document、json、text、ms-stream等类型，若设置为空则与text类型相同，响应结果以text形式返回。

若想要以文件形式返回可以将响应类型设置为BLOB。示例：

var xhr = new XMLHttpRequest();

xhr.open("GET", url, true);
xhr.responseText("BLOB");
xhr.send();

escape()

escape()函数的作用是:计算一个新字符串，其中某些字符已被十六进制转义序列替换。

由于服务端向前端传递的参数都为ISO_8859_1，所以前端直接获取响应头时中文字符会直接乱码，可以通过escape()将其转换为unicode。

该方法不会转义特殊字符

decodeURIComponent()

decodeuriccomponent()函数对以前由encodeuriccomponent或类似例程创建的统一资源标识符(URI)组件进行解码。

利用该方法可将后台传递的响应头进行解析，避免中文乱码。

示例

// 打开导出提示框
$("#showLoading").modal("show");

var xmlHttp;
if (window.XMLHttpRequest) 
	xmlHttp = new XMLHttpRequest();
 else 
	xmlHttp = new ActiveXObject("Microsolf.XMLHTTP");


// 添加请求参数
var formData = new FormData();
formData.appent("key", "value");

xmlHttp.open("post", url, true);

// 设置响应数据类型
xmlHttp.responseType = "blob";
xmlHttp.send(formData);
xmlHttp.onreadystatechange = function () 
	console.log(xmlHttp.status);
	console.log(xmlHttp.readyState);
	if (xmlHttp.readyState === 4 && xmlHttp.status === 200) 
		// 从后台返回的响应头中获取文件名
		var name = decodeURIComponent(escape(xmlHttp.getResponseHeader("Content-disposition")));
		// 截取响应头获取文件名
		var fileName = name.substring(21, name.length);

		// 将响应文件转换为BLOB二进制流
		var blob = new Blob([this.response], type: "application/vnd.ms-excel");

		// 创建服务器连接，通过点击下载文件
		var fileUrl = URL.createObjectURL(blob);
		var link = document.createElement("a");
		link.href = fileUrl;
		link.download = fileName;
		link.click();

		// 关闭提示框
		$("#showLoading").modal("hide");
	

java：springboot使用easyexcel实现excel文件的导出下载和上传导入功能(代码片段)

SpringBoot使用EasyExcel实现Excel文件的导出下载和上传导入功能文件目录$tree-Itarget.├──README.md├──pom.xml└──src└──main├──java│└──com│└──example│└──demo│├──DemoApplication.java│├──controller││└──EasyE... 查看详情

java实现导出excel功能，封装通用导出工具类(代码片段)

  引入maven<!--excel导出--><dependency><groupId>net.sourceforge.jexcelapi</groupId><artifactId>jxl</artifactId><version>2.6.12</version></depen 查看详情

java高级特性-注解：注解实现excel导出功能(代码片段)

注解是Java的一个高级特性，Spring更是以注解为基础，发展出一套“注解驱动编程”。这听起来高大上，但毕竟是框架的事，我们也能用好注解吗？的确，我们很少有机会自己写注解，导致我们搞不清楚注解是怎么回事，更别提... 查看详情

freemarker根据模板生成word文件实现导出功能(代码片段)

一、准备工作1.创建一个03的word文档，动态的数据用占位符标志占位（如testname）。然后另存为word2003的xml文件。2.格式化xml文件，占位符的位置用$testname代替，若有多行格式相同数据等，用List循环。　　注意：不要用Eclipse工具... 查看详情

java实现点击导出excel页面遮罩屏蔽，下载完成后解除遮罩(代码片段)

一、问题场景　　最近在做数据统计功能，需求是导出大数据量的excel，时间间隔较长，大概需要十秒左右，点击导出后，页面没有做任何处理，用户也不知道是否正在导出；如果没有做交互上的限制，用户可以一直点击导出按... 查看详情

flask+vue实现excel文件从服务器端导出至本地(代码片段)

背景前端：Vue后端：Flask-Restful这里主要实现的功能是将数据库中的数据整理后写入Excel文件，并先将文件存储在服务器端，再在客户端将文件从服务器端下载到本地。虽然后端主要是用的Flask-Restful，但这里导出的实现还是使用... 查看详情

vue通过blob对象实现导出excel功能(代码片段)

...有很多插件，比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导出Excel功能。但是有些需求因为数据量太大，成千上万条数据，所以是需要后端拼接，然后输出二进制流文件，然后前端直接下载，这次我们谈谈后者的做法。　　Blo... 查看详情

javaweb实现文件上传下载功能实例解析（好用）(代码片段)

 转：转：http://www.cnblogs.com/xdp-gacl/p/4200090.htmlJavaWeb实现文件上传下载功能实例解析 在Web应用系统开发中，文件上传和下载功能是非常常用的功能，今天来讲一下JavaWeb中的文件上传和下载功能的实现。　　对于文件上传，... 查看详情

openamp实现项目的功能需求(代码片段)

用户空间，交叉编译移植openamp文件使用petalinux工具自动生成的文件，可以执行自己根据源码移植的可执行程序，LibmetalOpenamp生成的文件不能执行，提示打开失败。在这个过程中遇到了很多问题还没有解决方法如何... 查看详情

mysql---存储过程(代码片段)

...程概述：简单的说，就是一组SQL语句集，功能强大，可以实现一些比较复杂的逻辑功能，类似于JAVA语言中的方法；说明:存储过程跟触发器有点类似，都是一组SQL集，但是存储过程是主动调用的，且功能比触发器更加强大，触发... 查看详情

java中exls导出功能实现-代码

JAVA中EXLS导出功能实现 -代码：基于SSH框架下的exls导出publicvoidexportExl()throwsException{Stringtext=(String)super.getRequest().getParameter("text");Stringflowid="051021";//(String)super.getRequest().getParameter( 查看详情

java利用itext实现导出pdf文件(代码片段)

因为工作中要用到，导出不同的PDF，所以学习了Itext我两天创建的PDF如下所示，主要是简单的表格类的  1、引包<dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</artifactId><version> 查看详情

vfs-虚拟文件系统的加载和导出(代码片段)

VFS-代码生成器预览功能实现VFS-虚拟文件系统基本操作方法的封装VFS-虚拟文件系统的加载和导出这是VFS的最后一篇，前面两篇中的基本方法已经实现了一个简单的虚拟文件系统，可以创建目录和文件，可以读写文件的... 查看详情

vue项目实现导入导出excel表格功能(代码片段)

前提:在我的项目中我使用的是ElementUi前端UI框架，用到的是里面的Upload上传组件。第一步：需要安装三个依赖npminstall-Sfile-saverxlsx （这里其实安装了2个依赖）npminstall-Dscript-loader 第二步：在main.js文件中全局导入挂载xlsx插... 查看详情

基于vue实现excel导出导入功能(代码片段)

...档查看：Excel导出Excel的导入导出都是依赖于js-xlsx来实现的。在js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。#使用由于Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。所以我们需要下载三个包，和一个js文件Ex... 查看详情

java后台实现excel文件下载(代码片段)

Java实现下载excel依赖使用的是poi实现目的请求HSSFWorkbook方法setResponseHeader方法fypclXls方法实现整个下载过程依赖使用的是poi开发中经常会设计到excel的处理，如导出Excel，导入Excel到数据库中，操作Excel目前有两个框架&#x... 查看详情

python此快速功能将excel文件中的所有工作簿导出为单独的csv，以使数据更易于使用。(代码片段)

查看详情

个人项目-wordcount（java实现）(代码片段)

wordCount1.项目相关要求项目Github地址这个项目要求写一个命令行程序，它能正确统计程序文件中的字符数、单词数、行数，以及还具备其他扩展功能，并能够快速地处理多个文件。作为实战项目，我完成的要求如下：基本功能-c... 查看详情