vue实现下载
Vue 实现文件下载的方法
在 Vue 中实现文件下载可以通过多种方式完成，以下是几种常见的方法：
使用 <a> 标签下载
通过动态创建 <a> 标签并设置 download 属性实现下载：
<template>
<button @click="downloadFile">下载文件</button>
</template>
<script>
export default {
methods: {
downloadFile() {
const link = document.createElement('a');
link.href = '文件URL或Blob对象';
link.download = '文件名.扩展名';
link.click();
}
}
}
</script>通过 Blob 对象下载二进制文件
适用于从 API 获取二进制数据（如后端返回的文件流）：
downloadFile() {
axios.get('API地址', { responseType: 'blob' }).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.download = '自定义文件名.ext';
link.click();
window.URL.revokeObjectURL(url); // 释放内存
});
}使用 FileSaver.js 库
安装 FileSaver 简化下载流程：
npm install file-saver使用示例：
import { saveAs } from 'file-saver';
downloadFile() {
saveAs('文件URL或Blob对象', '保存文件名.txt');
}下载 Base64 编码文件
处理 Base64 格式的数据：
downloadBase64() {
const byteCharacters = atob(base64Data.split(',')[1]);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += 512) {
const slice = byteCharacters.slice(offset, offset + 512);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, { type: 'application/octet-stream' });
saveAs(blob, 'filename.ext');
}注意事项
- 跨域问题：确保文件 URL 与网站同源或服务器已配置 CORS 允许下载
- 大文件处理：超过 2GB 的文件可能需要分块下载
- 移动端兼容性：部分安卓浏览器对
download属性支持有限
进阶方案
对于复杂场景（如断点续传、进度显示），可考虑：
- 结合
axios的onDownloadProgress事件实现进度条 - 使用 Web Worker 处理大文件下载
- 通过 Service Worker 实现离线下载能力
以上方法覆盖了从简单到复杂的下载需求，开发者可根据具体场景选择合适方案。
