Vue 实现下载
Vue 实现文件下载的方法
在 Vue 中实现文件下载可以通过多种方式完成，以下是几种常见的方法：
使用 <a> 标签下载
通过动态创建 <a> 标签并设置 download 属性来实现下载：
<template>
<button @click="downloadFile">下载文件</button>
</template>
<script>
export default {
methods: {
downloadFile() {
const link = document.createElement('a');
link.href = 'https://example.com/file.pdf';
link.download = 'file.pdf';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
</script>使用 Blob 对象下载
对于需要从后端 API 获取文件内容的场景，可以使用 Blob 对象：
downloadFile() {
axios.get('https://example.com/api/download', {
responseType: 'blob'
}).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.download = 'file.pdf';
document.body.appendChild(link);
link.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(link);
});
}使用 FileSaver.js 库
FileSaver.js 是一个简化文件下载流程的库：
import { saveAs } from 'file-saver';
downloadFile() {
axios.get('https://example.com/api/download', {
responseType: 'blob'
}).then(response => {
saveAs(new Blob([response.data]), 'file.pdf');
});
}下载 Base64 编码文件
如果文件是 Base64 编码的字符串：
downloadBase64File(base64Data, fileName) {
const link = document.createElement('a');
link.href = `data:application/octet-stream;base64,${base64Data}`;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}注意事项
- 确保后端正确设置了
Content-Disposition响应头，尤其是文件名包含中文时需要编码处理 - 跨域下载需要后端配置 CORS 头
- 大文件下载建议显示进度条，可以使用 axios 的
onDownloadProgress回调 - 移动端部分浏览器可能对下载有限制，需要测试兼容性
以上方法覆盖了 Vue 中实现文件下载的常见场景，可根据实际需求选择合适的方式。
