后端接口返回下载文件地址
{
"code": 200,
"message": "string",
"result": "http://www.aaa.com/xxx.xslx"
}
ajax请求
axios相关介绍
https://www.jianshu.com/p/50d6c71fa2af
// ajax 请求入参
let param = {
startTime: ‘’,
endTime: ‘’
}
// 使用 axios 库做ajax请求
axios.post('url', param)
.then((res) => {
// 通过动态创建 iframe方式下载
if (res.result) {
let downloadFileUrl = data.result
let dowloadiframe = document.createElement('iframe')
dowloadiframe.src = downloadFileUrl
dowloadiframe.style.display = 'none'
document.body.appendChild(dowloadiframe)
}
// console.log(res);
}, (error) => {
// console.log(error);
});
通过动态创建 iframe方式下载:
function downfile(url){
let downloadFileUrl = url
let downiframe = document.createElement("iframe");
downiframe.src = downloadFileUrl;
downiframe.style.display = "none";
document.body.appendChild(downiframe);
// 5分钟后定时删除 iframe
setTimeout(()=>{
downiframe .remove();
}, 5 * 60 * 1000);
}
通过 模拟a标签点击方式下载:
function downfile(url){
const a = document.createElement('a'); // 创建a标签
a.setAttribute('download', '');// download属性
a.setAttribute('href', downloadFileUrl);// href链接
a.click();// 自执行点击事件
}
3 通过 open方法直接下载
function downfile(url){
window.open(url)
}
上述方式就是发送一个请求,依赖后端的支持;对不需要精确知道文件下载的状态,上面方式就能满足下载;
网友评论