// 导出方法
function down(){let reqUrl = import.meta.env.BASE_URL + '/api/AboutView/downLoad?aboutType=admin_temp';let _token = sessionStorage.get('token').replace(/\"/g, "");let xhr = new XMLHttpRequest();xhr.open("get", reqUrl, true);xhr.responseType = "blob";xhr.setRequestHeader("token", _token);xhr.onload = function () {if (xhr.status == 200) {let blob = new Blob([this.response], { type: 'application/vnd.ms-excel' });let a = document.createElement("a")let url = window.URL.createObjectURL(blob)a.href = urla.setAttribute('download', "模板下载")a.click()URL.revokeObjectURL(a.href)}}xhr.send();
}
1、reqUrl
// 创建请求路径
let reqUrl = import.meta.env.BASE_URL + '/api/AboutView/downLoad?aboutType=admin_temp';
import.meta.env.BASE_URL:项目的环境变量,也代表引用的基础URL
2、_token
// 获取token,并去除双引号
let _token = sessionStorage.get('token').replace(/\"/g, "");
3、xhr
// 创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();
4、xhr.open
xhr.open("get", reqUrl, true);
打开一个请求
(1)"get":请求方法
(2)reqUrl:请求URL
(3)true:表示异步请求
5、xhr.responseType
// 设置响应类型为blob二进制流
xhr.responseType = "blob";
6、xhr.setRequestHeader
xhr.setRequestHeader("token", _token);
设置请求头
"token":判断是否已登录账号的标识
7、xhr.onload
xhr.onload = function () {if (xhr.status == 200) {let blob = new Blob([this.response], { type: 'application/vnd.ms-excel' });let a = document.createElement("a")let url = window.URL.createObjectURL(blob)a.href = urla.setAttribute('download', "模板下载")a.click() // 触发下载URL.revokeObjectURL(a.href)}
}
定义请求成功处理的事件
(1)blob
let blob = new Blob([this.response], { type: 'application/vnd.ms-excel' });
创建Blob对象,并指定其MIME类型为 application/vnd.ms-excel,表示该文件是一个Excel文件
(2)创建并配置下载链接
let a = document.createElement("a")
let url = window.URL.createObjectURL(blob)
a.href = url
a.setAttribute('download', "模板下载")
①创建一个新的 <a>
元素
②使用 window.URL.createObjectURL
方法为Blob对象创建一个URL
③将这个URL设置为 <a>
元素的 href
属性
④使用 setAttribute
方法设置 download
属性,这样当链接被点击时,浏览器会提示用户下载文件,而不是尝试打开它
(3)a.click()触发下载
(4)URL.revokeObjectURL(a.href)
释放之前所创建的URL对象,可以释放浏览器资源