美文网首页
通过ajax方式无闪烁实现文件下载的3种方式

通过ajax方式无闪烁实现文件下载的3种方式

作者: 35108b7328fb | 来源:发表于2020-01-10 19:03 被阅读0次

后端接口返回下载文件地址

{
  "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)
}

上述方式就是发送一个请求,依赖后端的支持;对不需要精确知道文件下载的状态,上面方式就能满足下载;

相关文章

网友评论

      本文标题:通过ajax方式无闪烁实现文件下载的3种方式

      本文链接:https://www.haomeiwen.com/subject/sodmactx.html