vue下载方法实现
Vue 下载方法实现
Vue 中实现文件下载功能可以通过前端直接生成或从服务器获取文件后触发浏览器下载。以下是几种常见方法：
使用 <a> 标签下载
通过动态创建 <a> 标签并设置 download 属性实现下载：
function downloadFile(content, fileName, type = 'text/plain') {
const blob = new Blob([content], { type });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
// 使用示例
downloadFile('Hello, World!', 'example.txt');通过后端 API 下载
当文件需要从服务器获取时，可使用 axios 或其他 HTTP 库：
axios({
url: '/api/download',
method: 'GET',
responseType: 'blob'
}).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.pdf');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});下载 Base64 文件
处理 Base64 编码的文件数据：
function downloadBase64(base64Data, fileName) {
const link = document.createElement('a');
link.href = `data:application/octet-stream;base64,${base64Data}`;
link.download = fileName;
link.click();
}注意事项
- 跨域请求需确保服务器配置正确的 CORS 头。
- 大文件建议使用分块下载或流式传输。
- 移动端部分浏览器可能限制自动下载，需用户手动触发。
以上方法可根据实际需求选择，前端生成适合小文件，服务器下载适合大文件或动态内容。
