vue2 axios下载文件

### 如何在 Vue 2 中使用 Axios 实现文件下载 为了实现在 Vue 2 中通过 `axios` 下载文件的功能，可以采用如下方式： 创建一个用于触发下载的方法，在该方法内部利用 `axios.get()` 或者更推荐的方式是使用 `axios.post()` 来发送请求并处理响应数据。对于二进制流形式返回的数据（比如 PDF 文件），应当设置合适的 HTTP 请求头来指示服务器端不解析实体内容，并且客户端应该准备好接收 Blob 类型的对象。 ```javascript methods: { downloadFile() { const url = 'your_api_endpoint_here'; axios({ method: 'get', url, responseType: 'blob', // Important to set this value for downloading files. }).then((response) => { const link = document.createElement('a'); let fileName = 'default_name.ext'; if (response.headers['content-disposition']) { // Check the Content-Disposition header for a suggested filename from server side, if available. const contentDisposition = response.headers['content-disposition']; const regex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/; const matches = regex.exec(contentDisposition); if (matches != null && matches[1]) { fileName = decodeURIComponent(matches[1].replace(/['"]/g, '')); } } link.href = URL.createObjectURL(new Blob([response.data])); link.setAttribute('download', fileName); // Set the file name here. document.body.appendChild(link); link.click(); // Trigger click event on anchor element programmatically. setTimeout(() => { URL.revokeObjectURL(link.href); // Clean up after use. document.body.removeChild(link); }, 0); }).catch(error => console.error(`Error during file download ${error}`)); } } ``` 上述代码片段展示了如何配置 `axios` 的 GET 请求以获取 blob 数据作为响应体，之后再将其转换成可点击链接供用户保存到本地磁盘上[^1]。 值得注意的是，在某些情况下特别是移动端浏览器可能会遇到兼容性问题导致无法正常工作；如果项目中有这方面的需求，则可能需要额外考虑其他解决方案或调整现有逻辑适应不同平台的行为差异。 #### 处理手机浏览器中的潜在问题 由于部分移动设备上的浏览器存在对 `<a>` 标签的 `download` 属性支持不佳的问题，这可能导致直接按照桌面环境下的做法尝试下载时失败。一种替代方案是在服务端生成临时直链让前端重定向至该地址完成实际下载过程，这样可以让大多数现代浏览器自动识别 MIME 类型进而启动相应的应用程序打开/存储资源。 另一种可能是探索第三方库如 FileSaver.js 提供的支持跨平台特性的 API 接口来进行更加健壮可靠的文件操作[^2]。