在vue中进行导出操作
一、背景因公司需要,我需要在原有的代码上进行迭代操作,需要对导出进行权限过滤,header中添加token以及UID等一系列的参数用于拦截信息,但由于请求之前是使用的window.location.href="xxxxxx"进行的跳转下载,所以无法在此基础上进行头文件参数添加操作,并且之前并没有对get请求的参数进行统一处理二、解决方法1、遇到这个问题我首先想到的就是使用ajax方法,在请求之前进
·
一、背景
因公司需要,我需要在原有的代码上进行迭代操作,需要对导出进行权限过滤,header中添加token以及UID等一系列的参数用于拦截信息,但由于请求之前是使用的window.location.href="xxxxxx"进行的跳转下载,所以无法在此基础上进行头文件参数添加操作,并且之前并没有对get请求的参数进行统一处理
二、解决方法
1、遇到这个问题我首先想到的就是使用ajax方法,在请求之前进行header参数的添加,话不多说我们开始写代码
运行
可以看出我们的请求是成功了,但是你会发现并没有excl表格被下载下来,后来发现是因为ajax在导出表格的时候是无法成功下载的,那我们换一种方式来进行下载,使用原生的ajax写一个类似form表单提交的方式
2、
postExcelFile(param){
var xhr ;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{//code for IE6,IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//导出路径以及参数
var url = exportDoubtForProvinceUrl(param) + "?resultId="+this.logId+"&uid="+this.$store.state.user.userId;
console.info("url:" + url);
//设置响应类型为blob类型
xhr.responseType = "blob";
//设置请求类型为get
xhr.open("get", url, true);
let uuid = UUID.createUUID();
uuid = uuid.replace(/\-/g, '');
//设置header参数 token
xhr.setRequestHeader("token",uuid);
//设置header参数 userid
xhr.setRequestHeader("iscUserId",this.getIscUserId(uuid));
console.info("iscUserId:" + this.getIscUserId());
//onload是只有在执行的时候会起作用
xhr.onload = function () {
let result = true; //默认接口调用失败
let blob = xhr.response; //xhr.response -->blob 数据源
let fr = new FileReader(); //FileReader可以读取Blob内容
fr.readAsText(blob); //二进制转换成text
fr.onload = function (e) { //转换完成后,调用onload方法
result = fr.result; //result 转换的结果
console.info("返回数据:" + e);
}
//此处是用来区分后台的数据源是文件、图片流,还是我们的告警信息,(如果是告警信息,size会很短)
if(blob.size < 200) {
result = false;
}
if (result) {
//获取响应文件流
let blob = this.response;
let reader = new FileReader();
// 转换为base64,可以直接放入a表情href
reader.readAsDataURL(blob);
reader.onload = function (e) {
//解决浏览器兼容性问题
let objectUrl = window.URL.createObjectURL(blob);
// 转换完成,创建一个a标签用于下载
let a = document.createElement('a');
a.href = objectUrl;
a.download = '结果明细.xls';
//a.click(); //一般到了这就可以了,但是火狐和google可能会有问题,需要下面的一步操作才可以下载成功,否则会下载下一个没有后缀名的文件
// 修复浏览器中无法触发click
$("body").append(a);
a.click();
$(a).remove();
}
}else{
console.info("导出异常" + result.msg);
}
}
xhr.send();
},
从括号里面的数值就知道我测试了多少次,这也是我从各大大佬的博客里面参考过来进行测试的结果
更多推荐
已为社区贡献3条内容
所有评论(0)