当前位置：首页 > VUE

vue中实现视频下载

2026-02-23 01:49:44VUE

vue中实现视频下载的方法

在Vue项目中实现视频下载功能，可以通过以下几种方式完成：

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

通过创建带有download属性的<a>标签，可以直接触发浏览器下载视频文件。适用于视频文件可直接访问的场景。

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

通过Blob对象和URL.createObjectURL下载

当视频文件需要通过API获取或处理后下载时，可以使用Blob对象和URL.createObjectURL方法生成临时下载链接。

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

<script>
export default {
  methods: {
    async downloadVideo() {
      const response = await fetch('视频API地址');
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      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);
    }
  }
}
</script>

使用第三方库辅助下载

对于更复杂的下载需求（如分片下载、进度显示等），可以使用axios或file-saver等库。

使用file-saver库的示例：

npm install file-saver

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

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

export default {
  methods: {
    async downloadVideo() {
      const response = await fetch('视频API地址');
      const blob = await response.blob();
      saveAs(blob, '视频文件名.mp4');
    }
  }
}
</script>

处理跨域问题

如果视频资源存在跨域限制，需要确保服务器配置了正确的CORS头部，或通过后端代理获取视频数据。

显示下载进度

使用axios时可以通过onDownloadProgress回调显示下载进度：

vue中实现视频下载

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      progress: 0
    };
  },
  methods: {
    async downloadVideo() {
      const response = await axios.get('视频API地址', {
        responseType: 'blob',
        onDownloadProgress: (progressEvent) => {
          this.progress = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
        }
      });
      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);
    }
  }
}
</script>