业务要求:后台提供下载excel接口,在前端对接口进行访问并下载excel
方法一:
直接使用window.href打开接口进行下载,代码如下
window.location.href = "url"//url就是后台提供的下载地址
优点:简单 缺点:window.href 打开一个接口时,浏览器会中止当前页面的加载,并立即导航到新的页面。因此,如果你多次使用
window.href 打开不同的接口,只有最后一次被成功加载,之前的请求都会被取消。
- 解决方法:使用 XMLHttpRequest 或 Fetch API
来进行异步请求,这样可以在不影响页面加载的情况下发送多个请求,并获取所有的响应结果。
方法二:
使用 XMLHttpRequest 来进行异步请求,代码如下:
var xhr = new XMLHttpRequest();
//放问接口,这里的第三个参数表示该请求是异步请求。如果设置为 false,则是同步请求,这样会阻塞页面并等待服务器响应后才继续执行后面的代码。
xhr.open('GET', 'url', true);
//类型
xhr.responseType = 'arraybuffer';
//进行下载
xhr.onload = function () {
//判断接口状态
if (this.status === 200) {
// 获取请求头的内容
var contentDisposition = xhr.getResponseHeader('Content-Disposition');
// 对名称进行保存
// var fileName = contentDisposition.match(/filename="(.*?)"/)[1];
// 这个方法就是给他一个文件名,可以给一个固定的字符串比如‘文件’
var fileName = contentDisposition.match(/filename=([^;\n\r]+)/)[1];
// URL编码后的文本,需要使用URL解码来将其转化为中文。
let decodedString = decodeURIComponent(urlEncodedString);
console.log("转译后的名称:",decodedString);
var blob = new Blob([this.response], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
//创建连接
var link = document.createElement('a');
// 对href进行赋值
link.href = window.URL.createObjectURL(blob);
// 对名称下载的进行赋值
link.download = fileName;
//模拟点击方法
link.click();
}
};
//发送请求
xhr.send();
小知识:
match()方法:
在JavaScript中,match()方法是一个用于在字符串中查找一个正则表达式匹配的函数。该方法可以接收一个正则表达式作为参数,也可以接收一个字符串作为参数。当参数是正则表达式时,它会在原始字符串中查找与正则表达式匹配的子串,并返回一个数组;如果没有找到匹配的内容,则返回null。当参数是字符串时,则会将该字符串转化为正则表达式进行匹配操作。
/filename=“(.*?)”/这是什么意思?
这是一个JavaScript正则表达式,用于匹配HTML中的或等元素中指定的文件名。具体而言,它使用了如下的语法:
/: 表示正则表达式的开始和结束符号;
filename=" :匹配输入字符串中以filename="开头的部分;
(.?) : 是一个捕获组,表示要匹配的文本内容;
. (贪心地匹配任意字符);?(
使其变成惰性匹配,这样它就只会匹配最少的字符);
": 匹配输入字符串中的引号。
综合起来,这个正则表达式可以从一个HTML字符串中获取第一个出现的 filename=“xxxxx” 这样的内容,其中 “xxxxx”> 表示对应的文件名。
url乱码解码,如何将%E4%BB%BB%E5%8A%A102的乱码恢复成中文?
这是URL编码后的文本,需要使用URL解码来将其转化为中文。URL解码可以使用JavaScript自带的decodeURIComponent()函数或者在线工具进行。
以下是使用JavaScript的示例代码:
let urlEncodedString = '%E4%BB%BB%E5%8A%A102';
let decodedString = decodeURIComponent(urlEncodedString);
console.log(decodedString); // 输出:任務02
解码后的结果为"任務02"。请注意,如果原始的字符串中含有其他字符(例如+),则可能需要在解码之前进行额外的处理。