当我采用默认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装配，就是本文档描述的方式；