当前位置：首页 > VUE

vue怎么实现视频下载

2026-02-24 04:42:18VUE

Vue 实现视频下载的方法

使用 HTML5 的 `<a>` 标签下载

在 Vue 组件中，可以通过创建一个隐藏的 <a> 标签，设置其 href 为视频文件的 URL，并添加 download 属性来实现下载。

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

<script>
export default {
  methods: {
    downloadVideo() {
      const link = document.createElement('a');
      link.href = '视频文件的URL';
      link.download = '视频文件名.mp4';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}
</script>

使用 Axios 下载二进制文件

如果视频文件需要通过 API 获取，可以使用 Axios 请求二进制数据，并通过 Blob 对象生成下载链接。

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

<script>
import axios from 'axios';

export default {
  methods: {
    async downloadVideo() {
      try {
        const response = await axios.get('视频API地址', {
          responseType: 'blob'
        });
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.download = '视频文件名.mp4';
        document.body.appendChild(link);
        link.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(link);
      } catch (error) {
        console.error('下载失败:', error);
      }
    }
  }
}
</script>

使用第三方库

可以使用第三方库如 file-saver 简化下载流程。

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

<script>
import axios from 'axios';
import { saveAs } from 'file-saver';

export default {
  methods: {
    async downloadVideo() {
      try {
        const response = await axios.get('视频API地址', {
          responseType: 'blob'
        });
        saveAs(new Blob([response.data]), '视频文件名.mp4');
      } catch (error) {
        console.error('下载失败:', error);
      }
    }
  }
}
</script>

处理跨域问题

如果视频文件位于不同域，确保服务器已配置 CORS 允许跨域访问。否则，下载可能会失败。

显示下载进度

对于大文件下载，可以通过 Axios 的 onDownloadProgress 显示下载进度。

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      progress: 0
    };
  },
  methods: {
    async downloadVideo() {
      try {
        const response = await axios.get('视频API地址', {
          responseType: 'blob',
          onDownloadProgress: (progressEvent) => {
            this.progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
          }
        });
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.download = '视频文件名.mp4';
        document.body.appendChild(link);
        link.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(link);
      } catch (error) {
        console.error('下载失败:', error);
      }
    }
  }
}
</script>

通过以上方法，可以在 Vue 中实现视频下载功能，并根据需求选择适合的方式。

vue怎么实现视频下载