vue axios实现自动下载
Vue 中使用 Axios 实现自动下载
在 Vue 项目中，可以通过 Axios 发起请求获取文件数据，并结合 Blob 对象和 URL.createObjectURL 实现自动下载功能。以下是具体实现方法：
基本实现步骤
安装 Axios（如未安装）：
npm install axios在 Vue 组件中引入 Axios：
import axios from 'axios';发起请求并处理文件下载：
axios({
method: 'get',
url: '文件下载地址',
responseType: 'blob' // 必须指定响应类型为 blob
}).then(response => {
// 创建 Blob 对象
const blob = new Blob([response.data]);
// 创建下载链接
const downloadUrl = window.URL.createObjectURL(blob);
// 创建隐藏的 <a> 标签触发下载
const link = document.createElement('a');
link.href = downloadUrl;
link.setAttribute('download', '文件名.扩展名'); // 设置下载文件名
document.body.appendChild(link);
link.click();
// 清理对象 URL 和 DOM 元素
window.URL.revokeObjectURL(downloadUrl);
document.body.removeChild(link);
}).catch(error => {
console.error('下载失败:', error);
});处理文件名动态获取
如果后端通过响应头返回文件名，可从 response.headers 中解析：
const contentDisposition = response.headers['content-disposition'];
let fileName = 'default.pdf'; // 默认文件名
if (contentDisposition) {
const fileNameMatch = contentDisposition.match(/filename="?(.+)"?/);
if (fileNameMatch && fileNameMatch[1]) {
fileName = fileNameMatch[1];
}
}封装为可复用方法
在 src/utils/download.js 中封装通用下载方法：
import axios from 'axios';
export function downloadFile(url, defaultName = 'file') {
return axios({
method: 'get',
url,
responseType: 'blob'
}).then(response => {
const blob = new Blob([response.data]);
const downloadUrl = window.URL.createObjectURL(blob);
const link = document.createElement('a');
// 尝试从响应头获取文件名
const disposition = response.headers['content-disposition'];
let fileName = defaultName;
if (disposition) {
const matches = disposition.match(/filename="?(.+)"?/);
if (matches && matches[1]) fileName = matches[1];
}
link.href = downloadUrl;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
// 清理资源
setTimeout(() => {
window.URL.revokeObjectURL(downloadUrl);
document.body.removeChild(link);
}, 100);
});
}组件中使用：
import { downloadFile } from '@/utils/download';
// 调用示例
downloadFile('/api/download/file123', 'backup.zip')
.catch(err => console.error('下载失败', err));注意事项
-
跨域问题：确保后端配置了正确的 CORS 头，特别是
Access-Control-Expose-Headers需要包含content-disposition。 -
大文件处理：对于大文件建议显示下载进度条：
axios({ method: 'get', url: '大文件地址', responseType: 'blob', onDownloadProgress: progressEvent => { const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total); console.log(`下载进度: ${percent}%`); } }) -
POST 请求：如需 POST 方式下载，修改 method 并传递数据：
axios({ method: 'post', url: '下载接口', data: { id: 123 }, responseType: 'blob' }) -
IE兼容性：IE10 以下需使用
window.navigator.msSaveBlob替代方案：if (window.navigator && window.navigator.msSaveBlob) { window.navigator.msSaveBlob(blob, fileName); } else { // 标准实现 }
以上方法适用于 PDF、Excel、图片等各种文件类型的自动下载场景，通过合理封装可成为项目中的通用下载解决方案。
