vue下载视频显示进度条

要在Vue中显示下载视频的进度条，可以使用axios发送HTTP请求并通过axios的onDownloadProgress事件监听下载进度。以下是一个显示进度条的示例代码：

template:

<template>
  <div>
    <button @click="downloadVideo">Download Video</button>
    <div v-if="downloading">
      <progress :value="downloadProgress" max="100"></progress>
      <span>{{ downloadProgress }}%</span>
    </div>
  </div>
</template>

script:

<script>
import axios from 'axios';

export default {
  data() {
    return {
      downloading: false,
      downloadProgress: 0,
    };
  },
  methods: {
    async downloadVideo() {
      this.downloading = true;
      const url = 'https://example.com/video.mp4';
      const response = await axios({
        url,
        method: 'GET',
        responseType: 'blob', // important
        onDownloadProgress: (progressEvent) => {
          this.downloadProgress = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
        },
      });
      this.downloading = false;
      const blob = new Blob([response.data], { type: 'video/mp4' });
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = 'video.mp4';
      link.click();
    },
  },
};
</script>

在这个示例中，我们使用axios发送HTTP GET请求并将响应类型设置为“blob”（二进制数据）。此外，我们通过onDownloadProgress事件监听下载进度，并在界面上显示进度条和百分比。当下载完成后，我们将文件保存为Blob对象并创建一个下载链接，允许用户下载视频文件。