当前位置：首页 > VUE

vue实现视频下载

2026-01-17 06:21:28VUE

Vue 实现视频下载的方法

在 Vue 项目中实现视频下载功能，通常可以通过以下几种方式实现。以下方法适用于前端直接下载视频文件或通过后端接口获取视频文件。

使用 `<a>` 标签下载

通过动态创建 <a> 标签并设置 download 属性，可以直接触发浏览器下载视频文件。适用于视频文件直接暴露在公共 URL 的情况。

<template>
  <button @click="downloadVideo">下载视频</button>
</template>

<script>
export default {
  methods: {
    downloadVideo() {
      const videoUrl = 'https://example.com/video.mp4';
      const a = document.createElement('a');
      a.href = videoUrl;
      a.download = 'video.mp4';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  }
};
</script>

通过 Blob 对象下载

如果视频文件是通过 API 返回的二进制数据（如 Blob 或 ArrayBuffer），可以通过 URL.createObjectURL 生成临时 URL 并下载。

<template>
  <button @click="downloadVideoFromApi">从 API 下载视频</button>
</template>

<script>
export default {
  methods: {
    async downloadVideoFromApi() {
      try {
        const response = await fetch('https://api.example.com/video');
        const blob = await response.blob();
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'video.mp4';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      } catch (error) {
        console.error('下载失败:', error);
      }
    }
  }
};
</script>

使用 Axios 下载文件

如果项目中使用了 Axios，可以通过设置 responseType: 'blob' 获取二进制数据，再通过 Blob 对象下载。

<template>
  <button @click="downloadVideoWithAxios">通过 Axios 下载</button>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    async downloadVideoWithAxios() {
      try {
        const response = await axios.get('https://api.example.com/video', {
          responseType: 'blob'
        });
        const url = URL.createObjectURL(new Blob([response.data]));
        const a = document.createElement('a');
        a.href = url;
        a.download = 'video.mp4';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      } catch (error) {
        console.error('下载失败:', error);
      }
    }
  }
};
</script>

分片下载大文件

对于大文件下载，可以显示下载进度，提升用户体验。

<template>
  <button @click="downloadLargeVideo">下载大视频</button>
  <div v-if="progress > 0">下载进度: {{ progress }}%</div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      progress: 0
    };
  },
  methods: {
    async downloadLargeVideo() {
      try {
        const response = await axios.get('https://api.example.com/large-video', {
          responseType: 'blob',
          onDownloadProgress: (progressEvent) => {
            this.progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
          }
        });
        const url = URL.createObjectURL(new Blob([response.data]));
        const a = document.createElement('a');
        a.href = url;
        a.download = 'large-video.mp4';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
        this.progress = 0;
      } catch (error) {
        console.error('下载失败:', error);
      }
    }
  }
};
</script>