axios下载文件

### 使用 Axios 下载文件的方法 在现代 Web 开发中，Axios 是一种非常流行的 HTTP 客户端库，用于发起网络请求。以下是通过 Axios 实现文件下载的具体方法。 #### 前提条件 为了能够成功下载文件，需确保服务器返回的内容类型为 `application/octet-stream` 或其他适合的二进制流 MIME 类型，并设置响应头中的 `Content-Disposition` 属性来指定文件名[^1]。 --- #### 方法一：基本配置与示例代码 以下是一个简单的 Axios 配置和示例代码，展示如何从后端接收并保存文件： ```javascript // 导入 axios 和 FileSaver（可选） import axios from 'axios'; import { saveAs } from 'file-saver'; // 可选，用于处理浏览器兼容性更好的文件存储 const downloadFile = async (url, data, fileName) => { try { const response = await axios({ url, method: 'POST', responseType: 'blob', // 设置响应数据类型为 blob，以便处理二进制文件 headers: { 'Content-Type': 'application/json' }, data }); // 创建 Blob 对象并将文件保存到本地 const blob = new Blob([response.data], { type: response.headers['content-type'] }); // 如果使用 file-saver 插件，则调用其接口；否则手动创建 a 标签触发下载 if (fileName && typeof saveAs === 'function') { saveAs(blob, fileName); } else { const link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = fileName || 'downloaded-file'; link.click(); window.URL.revokeObjectURL(link.href); // 清理临时 URL 资源 } } catch (error) { console.error('文件下载失败:', error.message); } }; // 示例调用 downloadFile('/api/download', { id: 1 }, 'example.pdf'); // 替换实际路径和参数 ``` 此代码片段展示了如何发送 POST 请求给服务端 API 并获取文件资源。注意设置了 `responseType: 'blob'` 来解析二进制数据[^4]。 --- #### 方法二：支持断点续传的大文件下载 对于较大的文件，推荐采用分片下载的方式以提高性能和用户体验。这通常涉及以下几个方面： - **HTTP Range 头部**：告知服务器只传输特定字节范围的数据。 - **Blob 合并逻辑**：将多个部分拼接成完整的文件。 下面是一段基于多线程机制的大文件下载实现思路[^3]: ```javascript async function multiThreadDownload(url, totalSize, chunkSize = 1024 * 1024 * 5 /* 默认每块大小 */) { let chunks = []; for (let start = 0; start < totalSize; start += chunkSize) { const end = Math.min(start + chunkSize - 1, totalSize - 1); const res = await axios({ url, method: 'GET', responseType: 'arraybuffer', headers: { 'Range': `bytes=${start}-${end}` } }); chunks.push(res.data); } // 将所有分片合并为单一 Blob 文件 const fullBlob = new Blob(chunks, { type: 'application/pdf' }); // 修改 MIME 类型适配目标文件格式 // 存储至客户端 const link = document.createElement('a'); link.href = window.URL.createObjectURL(fullBlob); link.download = 'large_file.pdf'; link.click(); } ``` 上述函数实现了按照固定尺寸切割文件并通过多次请求逐步加载的功能。需要注意的是，这种方法依赖于服务器对 `Range` 请求的支持情况[^3]。 --- #### 工具封装建议 如果频繁执行类似的文件操作，可以考虑将其抽象为通用工具类或模块。例如，在 Vue.js 项目中定义如下辅助函数[^4]: ```javascript export default { install(Vue) { Vue.prototype.$downloadFile = ({ url, method = 'get', params, data, filename }) => { return axios({ url, method, params, data, responseType: 'blob', onDownloadProgress(progressEvent) { const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total); console.log(`已下载 ${percentCompleted}%`); } }).then(response => { const dispositionHeader = response.headers['content-disposition']; const regexMatch = dispositionHeader.match(/filename="(.+)"/i); const finalFilename = regexMatch ? decodeURIComponent(regexMatch[1]) : filename; const blobData = new Blob([response.data]); const anchorElement = document.createElement('a'); anchorElement.style.display = 'none'; anchorElement.href = window.URL.createObjectURL(blobData); anchorElement.setAttribute('download', finalFilename ?? 'unknown'); document.body.appendChild(anchorElement); anchorElement.click(); setTimeout(() => { document.body.removeChild(anchorElement); window.URL.revokeObjectURL(anchorElement.href); }, 0); }); }; } }; ``` 这样可以在任何组件内部轻松调用 `$downloadFile()` 方法完成复杂场景下的文件交互需求。 ---