当我采用默认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 = https://www.itzhengshu.com/excel/blobURLtempLink.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(" ", " ", $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 = https://www.itzhengshu.com/excel/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) }【前端axios下载文件你真的会吗？】2、ajax装配 ， 就是本文档描述的方式；