当前位置：首页 > VUE

vue前端实现下载进度

2026-02-09 20:55:00VUE

实现下载进度显示的方法

在Vue中实现下载进度显示，可以通过监听XMLHttpRequest或fetch的progress事件来获取下载进度数据。以下是具体实现方式：

使用XMLHttpRequest实现

XMLHttpRequest对象提供了progress事件，可以监听下载进度：

vue前端实现下载进度

downloadFile(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';

  xhr.addEventListener('progress', (event) => {
    if (event.lengthComputable) {
      const percentComplete = Math.round((event.loaded / event.total) * 100);
      this.downloadProgress = percentComplete;
    }
  });

  xhr.onload = () => {
    if (xhr.status === 200) {
      const blob = new Blob([xhr.response]);
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = 'filename.ext';
      link.click();
    }
  };

  xhr.send();
}

使用axios实现

axios也支持进度监听，可以通过onDownloadProgress配置项实现：

vue前端实现下载进度

async downloadWithAxios(url) {
  try {
    const response = await axios({
      url,
      method: 'GET',
      responseType: 'blob',
      onDownloadProgress: (progressEvent) => {
        const percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        this.downloadProgress = percentCompleted;
      }
    });

    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'filename.ext');
    document.body.appendChild(link);
    link.click();
  } catch (error) {
    console.error('Download error:', error);
  }
}

使用fetch API实现

fetch API本身不直接支持进度跟踪，但可以通过读取响应体的流来实现：

async fetchWithProgress(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const contentLength = +response.headers.get('Content-Length');
  let receivedLength = 0;
  const chunks = [];

  while(true) {
    const {done, value} = await reader.read();
    if(done) break;

    chunks.push(value);
    receivedLength += value.length;
    this.downloadProgress = Math.round((receivedLength / contentLength) * 100);
  }

  const blob = new Blob(chunks);
  const downloadUrl = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = 'filename.ext';
  link.click();
}

进度条UI实现

在Vue模板中可以这样显示进度：

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
    <div v-if="downloadProgress > 0">
      <progress :value="downloadProgress" max="100"></progress>
      <span>{{ downloadProgress }}%</span>
    </div>
  </div>
</template>