当前位置：首页 > VUE

vue实现视频下载功能

2026-02-21 08:43:29VUE

Vue 实现视频下载功能的方法

前端直接下载（适用于公开URL）

对于可直接访问的视频文件，可通过创建 <a> 标签触发下载：

vue实现视频下载功能

// 在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>

以上方法涵盖了从简单到复杂的视频下载场景，可根据实际需求选择适合的方案。

vue实现视频下载功能