vue实现文件下载a
使用 window.open 方法
通过 window.open 直接打开文件下载链接，适用于简单的文件下载需求。
确保后端返回的文件 URL 是正确的，且服务器允许跨域访问（如有需要）。
window.open('http://example.com/file.pdf', '_blank');使用 a 标签动态下载
动态创建 a 标签并触发点击事件，适合需要隐藏下载链接或自定义文件名的情况。
通过 download 属性可以指定下载的文件名。
const link = document.createElement('a');
link.href = 'http://example.com/file.pdf';
link.download = 'custom-filename.pdf'; // 可选，设置下载文件名
document.body.appendChild(link);
link.click();
document.body.removeChild(link);通过 axios 或 fetch 下载文件
适用于需要添加请求头（如认证信息）或处理二进制数据的场景。
需确保后端返回正确的 Content-Disposition 头或手动指定文件名。
axios({
url: 'http://example.com/file.pdf',
method: 'GET',
responseType: 'blob', // 重要：指定响应类型为二进制
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.download = 'file.pdf';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url); // 释放内存
});处理大文件下载进度
通过 axios 的 onDownloadProgress 回调可以监控下载进度，适合大文件下载场景。
axios({
url: 'http://example.com/large-file.zip',
method: 'GET',
responseType: 'blob',
onDownloadProgress: (progressEvent) => {
const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(`下载进度: ${percent}%`);
},
}).then((response) => {
// 处理文件下载
});后端配合要求
确保后端接口正确设置响应头，尤其是 Content-Disposition 和 Content-Type。
例如，在 Node.js（Express）中：
res.setHeader('Content-Disposition', 'attachment; filename=file.pdf');
res.setHeader('Content-Type', 'application/pdf');跨域问题处理
如果文件托管在跨域服务器上，需确保服务器配置 CORS 允许访问。
例如，后端需设置：
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Content-Disposition
