a标签下载文件,js/jq 创建a标签导出Excel文件
1、设置dom(html)
<button type="button" class="layui-btn layui-btn-sm" id="formExport">导出</button>
2、点击执行下载事件(script)
$('#formExport').on('click',function(event) {
event.preventDefault();
var url = basePath + '/template/apply.xlsx';
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status === 200) {
var blob = this.response;
var href = window.URL.createObjectURL(blob); // 创建下载链接
// 判断是否是IE浏览器,是则返回true
if (window.navigator.msSaveBlob) {
try {
window.navigator.msSaveBlob(blob, '备库申请模板.xlsx')
} catch (e) {
console.log(e);
}
} else {
// 非IE浏览器,创建a标签,添加download属性下载
var a = document.createElement('a'); // 创建下载链接
a.href = href;
a.target = '_blank'; // 新开页下载
a.download = '备库申请模板.xlsx'; // 下载文件名
document.body.appendChild(a); // 添加dom元素
a.click(); // 点击下载
document.body.removeChild(a); // 下载后移除元素
window.URL.revokeObjectURL(href); // 下载后释放blob对象
}
}
}
xhr.send()
})
如果前端接收到的是文件路径,url直接下载文件简单版:
const blob = new Blob([row.path], { type: 'application/vnd.ms-excel' })
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, row.name)
} else {
const href = URL.createObjectURL(blob)
const a = document.createElement('a')
a.style.display = 'none'
a.href = href
a.download = row.name
a.click()
URL.revokeObjectURL(a.href)
}