前端axios下载文件你真的会吗? 前端如何下载后端文件

当我采用默认axios配置是不管我采用get还是post我都无法下载文件

我搓火的要死了；

后来将axios配置的responseType: 'blob' 文件好像是可以下载了，但是在ajax 返回中无法拿到 文件名称

文件名称 在返回的 的文件头 headers：content-disposition 中，但是我们的返回response 中就是没有这个参数

我在想是否后台没有设置这个文件头呢？

后台代码（PHP）：

header('Content-Type:application/vnd.ms-excel'); 
header('Content-Disposition:attachment;filename="' . $filename . '"'); 
header('Cache-Control:max-age=0');

好像是设置了，Content-Disposition 协议头的，奇怪了

我查阅了HTTP协议文件说明，其实为了ajax安全性考虑，默认这个文件头 Content-Disposition 是不允许的 前端ajax直接获取的

于是代码改成（PHP）

header('Content-Type:application/vnd.ms-excel');
header('Content-Disposition:attachment;filename="' . $filename . '"'); 
header('Cache-Control:max-age=0'); 
header('Access-Control-Expose-Headers: Content-Disposition'); //这个是关键，允许ajax读取  Content-Disposition

可以下载了，这个是令人兴奋

这时前端的ajax终于可以拿到 Content-Disposition

前端代码如下

 const _download  = function (response) {
  const attachment = response.headers['content-disposition']//关键
  const fileName = attachment.match(/filename=(.*)/)[1];
  const blob = new Blob([response.data], { type:response.headers['content-type'] })
  if (typeof window.navigator.msSaveBlob !== 'undefined') {
    window.navigator.msSaveBlob(blob, decodeURI(fileName))
  }else{
    const blobURL = window.URL.createObjectURL(blob)
    // 创建a标签，用于跳转至下载链接
    const tempLink = document.createElement('a')
    tempLink.style.display = 'none'
    tempLink.href = blobURL
    tempLink.setAttribute('download', decodeURI(fileName))
    // 兼容：某些浏览器不支持HTML5的download属性
    if (typeof tempLink.download === 'undefined') {
       tempLink.setAttribute('target', '_blank')
    }
    // 挂载a标签
    document.body.appendChild(tempLink)
    tempLink.click()
    document.body.removeChild(tempLink)
    // 释放blob URL地址
    window.URL.revokeObjectURL(blobURL)
  }
}

但是新的问题来了，文件名称乱码

问题肯定是在后端，后台没有做文件名称转码处理；

后台代码修改

   	$filename = date('Y年m月d日H时', time()) . '.xlsx';
		$filename = urlencode($filename);//处理中文乱码问题
		$filename = str_replace("+", "%20", $filename); //处理兼容问题
		header('Content-Type:application/octet-stream;charset=UTF-8');//处理中文乱码问题
		header('Content-Disposition:attachment;filename="' . $filename . '"');
		header('Cache-Control:max-age=0');
		header('Access-Control-Expose-Headers: Content-Disposition');//这个是关键，允许ajax读取  Content-Disposition

好了到这里基本上都解决了，真的是这样吗？

我后台输出的文件名称是 ×××××.xlsx

但是我下载的文件竟然莫名其妙的被修改成了 ×××××_.xlsx_

我很郁闷了；目前我还没有找到何时的方法解决，

这个是由于浏览器安全问题导致，我试图想在nginx配置中加入欺骗手段处理浏览器安全，但是由于时间原因我先放下这个问题， 你可以试试看去解决；如果解决了请留言告诉我；

思考：

后台： 写代码是是否严格考虑了各种情况？

前端：是否考虑了多种下载方案；

究竟有哪些下载方案

1、前端直接将下载地址转到到一个虚拟的a标签，然后下载的内容的装配（new Blob） 交付给浏览器完成

缺点：无法采用POST方法了，只能用get方式了；

代码如下：

 const _download = function (url，param) {
   let _url =url+ '/?' +param//装配成get传递参数 // 创建a标签，用于跳转至下载链接 
   const tempLink = document.createElement('a') 
   tempLink.style.display = 'none'
   tempLink.href = blobURL // 兼容：
   if (typeof tempLink.download === 'undefined') {
     tempLink.setAttribute('target', '_blank') } // 挂载a标签
   document.body.appendChild(tempLink) 
   tempLink.click()//模拟点击下载 
   document.body.removeChild(tempLink) // 释放blob URL地址 
   window.URL.revokeObjectURL(blobURL)
 }

2、ajax装配，就是本文档描述的方式；

Tags：前端文件下载

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。