vue前端实现下载模板
Vue 前端实现下载模板的方法
使用 window.open 直接下载
适用于简单的文件下载，直接通过 URL 触发下载。
将模板文件（如 Excel、PDF）放在 public 目录下，通过静态路径访问：
downloadTemplate() {
window.open('/templates/example.xlsx', '_blank');
}文件路径示例：public/templates/example.xlsx。
通过 <a> 标签动态触发
通过创建隐藏的 <a> 标签模拟点击下载，适合需要动态生成下载链接的场景：
downloadTemplate() {
const link = document.createElement('a');
link.href = '/templates/example.xlsx';
link.download = 'template.xlsx';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}结合后端 API 下载
若文件需要权限验证或动态生成，调用后端接口获取文件流：
import axios from 'axios';
downloadTemplate() {
axios({
url: '/api/download-template',
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 = 'template.xlsx';
link.click();
window.URL.revokeObjectURL(url);
});
}使用第三方库（如 FileSaver.js）
简化 Blob 文件下载流程，适合复杂场景：
import { saveAs } from 'file-saver';
downloadTemplate() {
fetch('/templates/example.xlsx')
.then(res => res.blob())
.then(blob => saveAs(blob, 'template.xlsx'));
}注意事项
- 静态文件存放：确保模板文件放置在
public目录，避免被 Webpack 打包。 - 跨域问题：若文件托管在 CDN 或外部服务器，需配置 CORS。
- 错误处理：添加
catch块处理下载失败情况，例如网络错误或权限问题。
