vue中前端实现下载excel文件，.csv文件, .sql文件
主要是使用了js的new Blob方法
//如果需要适应IE的话加上这个方法
MyBrowserIsIE() {
let isIE = false;
if(navigator.userAgent.indexOf('compatible') > -1 && navigator.userAgent.indexOf('MSIE') > -1) {
isIE = true
} if (navigator.userAgent.indexOf('Trident') > -1) {
isIE = true;
}
return isIE
}
//excel文件下载
toExcell(index, row) {
if(row.oStyle == 1){
this.$axios({
method: "post",
data: {},
responseType: "blob"
})
.then(res => {
const link = document.createElement("a");
let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
link.style.display = "none";
link.href = URL.createObjectURL(blob);
let num = "";
for (let i = 0; i < 10; i++) {
num += Math.ceil(Math.random() * 10);
}
link.setAttribute("download", "用户_" + num + ".xls");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
.catch(error => {
this.$Notice.error({
title: "错误",
desc: "网络连接错误"
});
});
}
}
//下载》sql文件
export(){
axios.get('/***', {
params: {
ids:1,
datatype:'DB2'
}
})
.then(function (data) {
let blob = new Blob(['\ufeff' + data],{
type:'application/text'
});
let dateStr = new Date().toLocaleDateString().replace(/\//g,'-');
if (this.MyBrowserIsIE()) {
navigator.msSaveBlob(blob,'functions_' + dataStr + '.sql');
} else {
let url = URL.createObjectURL(blob);
let a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.setAttribute('download', 'functions_' + dataStr + '.sql');
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}
this.$message({
type:'success',
message:'导出成功!',
duration:3000
})
})
.catch(function (error) {
this.$message({
type:'error',
message:'导出失败，请检查网络!',
duration:3000
})
});
}
.csv文件下载只需要替换为这一段代码
let blob = new Blob(["\ufeff" + data],{
type:'text/csv'
});
let dataStr = new Date().toLocaleDateString().replace(/\//g,'-');
if(this.MyBrowserIsIE()){
navigator.msSaveBlob(blob,'abbrSpecInfo_' + dateStr + '.csv');
} else {
let a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.target = '_blank';
a.download = ('abbrSpecInfo_' + dateStr + '.csv');
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
}
