vue实现视频下载功能
Vue 实现视频下载功能的方法
前端直接下载（适用于公开URL）
对于可直接访问的视频文件，可通过创建 <a> 标签触发下载：
// 在Vue方法中实现
downloadVideo(url, filename) {
const link = document.createElement('a');
link.href = url;
link.download = filename || 'video.mp4';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}处理需要鉴权的视频
当视频需要后端验证时，需通过API请求获取文件流：
axios({
url: '/api/video/download',
method: 'GET',
responseType: 'blob'
}).then(response => {
const blob = new Blob([response.data]);
const downloadUrl = window.URL.createObjectURL(blob);
this.downloadVideo(downloadUrl, 'protected_video.mp4');
});分片下载大文件
对于大文件下载可显示进度条：
axios({
url: '/api/large-video',
method: 'GET',
responseType: 'blob',
onDownloadProgress: progressEvent => {
const percent = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
this.downloadProgress = percent;
}
}).then(response => {
// ...处理blob下载逻辑
});注意事项
- 跨域问题需后端配置CORS
- 移动端浏览器可能限制自动下载
- 大文件下载建议添加进度反馈
- 敏感文件应进行权限验证
完整组件示例
<template>
<button @click="handleDownload">
下载视频 {{ downloadProgress }}%
</button>
</template>
<script>
export default {
data() {
return {
downloadProgress: 0
};
},
methods: {
async handleDownload() {
try {
const response = await axios({
url: '/api/video',
method: 'GET',
responseType: 'blob',
onDownloadProgress: progressEvent => {
this.downloadProgress = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
}
});
const blob = new Blob([response.data]);
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'video.mp4';
link.click();
window.URL.revokeObjectURL(url);
} catch (error) {
console.error('下载失败:', error);
}
}
}
};
</script>以上方法涵盖了从简单到复杂的视频下载场景，可根据实际需求选择适合的方案。
