vue实现本地文件下载
Vue 实现本地文件下载
方法一：使用 <a> 标签下载
通过动态创建 <a> 标签并设置 download 属性实现文件下载。
<template>
<button @click="downloadFile">下载文件</button>
</template>
<script>
export default {
methods: {
downloadFile() {
const link = document.createElement('a');
link.href = '/path/to/file.pdf'; // 文件路径
link.download = 'filename.pdf'; // 下载文件名
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
};
</script>方法二：使用 Blob 对象下载
适用于动态生成文件内容或从 API 获取文件数据的情况。
<template>
<button @click="downloadBlob">下载 Blob 文件</button>
</template>
<script>
export default {
methods: {
downloadBlob() {
const content = 'Hello, World!'; // 文件内容
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'example.txt';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
}
}
};
</script>方法三：通过后端 API 下载
适用于需要从后端获取文件的场景。
<template>
<button @click="downloadFromAPI">从 API 下载</button>
</template>
<script>
import axios from 'axios';
export default {
methods: {
async downloadFromAPI() {
try {
const response = await axios.get('/api/download', {
responseType: 'blob'
});
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.download = 'api-file.pdf';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
} catch (error) {
console.error('下载失败:', error);
}
}
}
};
</script>方法四：使用 FileSaver.js 库
通过第三方库 file-saver 简化下载逻辑。
安装依赖：
npm install file-saver使用示例：
<template>
<button @click="saveFile">使用 FileSaver 下载</button>
</template>
<script>
import { saveAs } from 'file-saver';
export default {
methods: {
saveFile() {
const content = new Blob(['FileSaver 示例内容'], { type: 'text/plain' });
saveAs(content, 'example.txt');
}
}
};
</script>注意事项
- 文件路径需确保正确，相对路径需基于项目部署结构。
- 跨域文件下载可能受浏览器安全策略限制。
- 动态生成文件时需注意 Blob 的 MIME 类型设置。
- 大文件下载建议分块处理或显示下载进度。
