1、第一种方式我们可以使用get的请求的方式
//导出
downloadFile() {
let url = `${
httpUrl.risk_event.assetSituationExcel
}?assetType=${this.currentSearchValues.assetType}&responsible=${this.currentSearchValues.responsible}&startTime=${this.currentSearchValues.startTime}&endTime=${this.currentSearchValues.endTime}`;
``;
this.downloadFiles(url, { name:'资产报表'});
},
downloadFiles(url, item) {
var a = document.createElement("a"); // 生成一个a元素
var params = { bubbles: false, cancelable: false };
var event = document.createEvent("MouseEvent");
event.initMouseEvent(
"click",
params.bubbles,
params.cancelable,
window,
0,
params.screenX || 0,
params.screenY || 0,
params.clientX || 0,
params.clientY || 0,
false,
false,
false,
false,
0,
null
);
var event = new MouseEvent("click");
a.download = item.name;
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
},
2、第二种方式是post的方式
$self.$axios
.post(httpUrl.cloudDesk.downloadCloudDesk, { ...$self.searchData, ...page },{responseType: 'blob'})
.then(function(response) {
var BLOB = new Blob([response.data], { type: "application/octet-stream" });
const fileReader = new FileReader(); // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
fileReader.readAsDataURL(BLOB); // 开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
fileReader.onload = (event) => { // 处理load事件。该事件在读取操作完成时触发
// 新建个下载的a标签,完成后移除。
let a = document.createElement('a');
a.download = `云桌面登录详情.xlsx`;
a.href = event.target.result;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
});
目前我接触到的download下载就是这两种方式,当然在前面的作品中,我还发表了一种下载方式,和这篇文章中的第一种方式差不多。