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下载

  • 相关阅读:
    Sharp Develop发布了1.0.3版本
    【历代Windows操作系统大观】(转)
    Matlab与vc混合编程中的问题,使用idl文件
    明天回湖北!今天要开始收拾烂摊子了
    MongoDB深究之ObjectId
    MVC设计模式
    ASP.NET验证控件详解
    C# 中的 LINQ 入门学习摘记
    15款在线科学计算器
    从底层了解ASP.NET架构
  • 原文地址:https://www.cnblogs.com/zzwlong/p/15540482.html
Copyright © 2011-2022 走看看