zoukankan      html  css  js  c++  java
  • axios用get或post请求下载文件,可下载原来的文件名

    一、get请求下载:

    window.open(url, params)

    二、post请求下载

    创建一个a标签下载
    axios({ url: url, method:
    'post', data: data, responseType: 'blob' }).then(res => { let blob = new Blob([res.data]) let url = window.URL.createObjectURL(blob) let link = document.createElement('a') link.style.display = 'none' link.href = url // 文件名一般是在res.headers里:content-disposition;fileName=xxxxxxxxxx.csv,这个让后端统一规定文件名怎么放前端就怎么取就行 let str = typeof res.headers['content-disposition'] === 'undefined' ? res.headers['Content-Disposition'].split(';')[1] : res.headers['content-disposition'].split(';')[1] let filename = typeof str.split('fileName=')[1] === 'undefined' ? str.split('filename=')[1] : str.split('fileName=')[1] link.setAttribute('download', decodeURIComponent(filename)) // 解码,这里也可以自定义下载的文件名字,如link.setAttribute('download', 'xxxxxdownload.xls') document.body.appendChild(link) link.click() //用新窗口打开window.open(link.click()),但是下载完成后不会先get请求那样自动关闭窗口 }) .catch(error => { console.log(error) })

    用哪种方式下载:

    1)下载文件比较大建议使用get。如果用post,点了会半天没反应,得加loading之类的而且体验也不好,用get在用window.open打开新窗口下载,下载完后会自动关闭窗口体验比较好

    2)下载文件不大而且传参很多的话建议使用post。不过只能在本页面下载,不能打开新窗口下载,哪怕把数据放到window.open打开新窗口下载,但下载完成后不会自动关闭新窗口

    3)下载文件很大而且传参也很大建议用get,传参过长超过浏览器限制,那让后台再加一个post接口,把这些多的参数用这个post传过去,再回传一下类似秘钥之类的用于get下载

  • 相关阅读:
    c#常用正则表达式
    亲密接触Discuz!NT之架构篇:优良架构 方便网站整合与二次开发
    即时对话,在线对话,QQ,MSN,UC,popo
    C#事务处理
    正则表达式中的特殊字符
    9:38 2009729
    16:43 200981 缓解疲劳的七大唱片 免费短信
    复选框 全选
    9:05 2009721
    9:34 2009728
  • 原文地址:https://www.cnblogs.com/zzwlong/p/15540482.html
Copyright © 2011-2022 走看看