标签：jquery function outputStream java res excel xhr let new
最近需要在下载的请求头中加入token身份验证，所以传统的form或者url直接下载的方式需要调整成使用ajax，以方便在head中放入token等校验信息，最近研究了两种实现方式，中间踩了很多坑（乱码、FileReader.readAsDataURL: Argument 1 does not implement interface Blob.等问题）
一、使用流的方式+XMLHttpReques方式
后端代码：
HSSFWorkbook wb = ...;//此处省略
response.setContentType("application/vnd.ms-excel");
response.setCharacterEncoding("UTF-8");
response.setHeader("Content-disposition", "attachment;filename=test.xls");
OutputStream outputStream = null;
try {
outputStream = response.getOutputStream();
wb.write(outputStream);
} catch (IOException e) {
e.printStackTrace();
} finally {
if (outputStream != null) {
outputStream.flush();
outputStream.close();
}
}前端代码：
function downloada(url,filename) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('token', 'xxxxxxx'); //用来做身份校验的字符串
xhr.responseType = "blob"; // 设置返回类型blob
// 定义请求完成的处理函数，请求前也可以增加 加载框/禁用下载按钮的相关逻辑
xhr.onload = function() {
if (this.status === 200) {
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function(e) {
// 转换完成后创建a标签下载
var a = document.createElement('a');
a.download = filename;
a.href = e.target.result;
$("body").append(a);
a.click();
$(a).remove();
}
}
};
xhr.send() //发送ajax请求
}这种方式可以实现，但是尝试把ajax换成jquer的方式会报错：FileReader.readAsDataURL: Argument 1 does not implement interface Blob，使用XMLHttpReques方式正常可用；
二、使用文件Base64字符串+Jquery Ajax方式实现
后端：
HSSFWorkbook wb = ...; //此处省略
File PDFFilePath = new File("test.xls");
FileOutputStream exportXls = new FileOutputStream(PDFFilePath);
wb.write(exportXls);
exportXls.close();
//自定义方法 文件转base64流
String strResult = PDFToBase64(PDFFilePath);
strResult = strResult.replaceAll("\r\n", "");
//... 根据情况是否要删除创建好的无用文件
return Ret.SUCCESS(strResult); //返回给前端json对象（Ret.SUCCESS是自定义方法，为了返回json对象结构）前端：
<script src="http://cdn.staticfile.org/FileSaver.js/1.3.8/FileSaver.min.js"></script> //引入FileSaver保存js
//工具方法
function b64toFile(b64Data, filename, contentType) {
let sliceSize = 512;
let byteCharacters = atob(b64Data);
let byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
let slice = byteCharacters.slice(offset, offset + sliceSize);
let byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
let byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
let file = new File(byteArrays, filename, {type: contentType});
return file;
}
//下载时调用的入口方法
function download(){
$.ajax({
url: "http://localhost:81/api/code/uncheck/exportAllGroupTest",
type: "post",
dataType: "json",
beforeSend: function(request){
request.setRequestHeader("Content-Type","application/vnd.ms-excel");
request.setRequestHeader("token","xxxx");
},
success: (res)=>{
console.log("res:"+res);
console.log("base64:"+res.data);
//base64Data 是服务器获取到的数据
let file = b64toFile(res.data, 'test', 'application/vnd.ms-excel;charset=utf-8');
//利用FileSaver.js 下载文件为Excel文件
saveAs(file, "fileName.xls");
}
});
}
这种方案的实现原理是，后端把文件转换成了base64字符串，前端通过json拿到文件的字符串后进行逆转换下载；
欢迎关注博主，后续不落下博主的干活文章；
标签：jquery,function,outputStream,java,res,excel,xhr,let,new 来源： https://blog.csdn.net/zhazha0807/article/details/118734395
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。