vue下载实现
Vue 下载功能的实现方法
前端实现文件下载
使用 axios 或 fetch 请求文件数据，通过创建 <a> 标签触发下载：
// 示例：通过Blob对象下载
axios.get('/file-url', { responseType: 'blob' }).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'filename.ext');
document.body.appendChild(link);
link.click();
link.remove();
});服务端配合设置
Node.js 示例（Express框架）：
app.get('/download', (req, res) => {
const filePath = '/path/to/file.ext';
res.download(filePath); // 自动处理headers和文件流
});浏览器兼容性处理
对于大文件或特殊格式，建议添加加载状态提示。IE浏览器需兼容性处理：
// IE10+兼容方案
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(blob, fileName);
}进度显示实现
通过 axios 的 onDownloadProgress 实现进度条：
axios.get('/large-file', {
responseType: 'blob',
onDownloadProgress: progressEvent => {
const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(`下载进度: ${percent}%`);
}
});安全注意事项
- 服务端应对文件路径进行校验，防止目录遍历攻击
- 敏感文件需增加权限验证
- 设置合适的CORS策略
