当前位置：首页 > VUE

vue实现下载暂停

2026-01-07 04:41:26VUE

Vue实现下载暂停功能

在Vue中实现下载暂停功能，通常需要结合XMLHttpRequest或Fetch API的AbortController来控制请求中断。以下是具体实现方法：

使用XMLHttpRequest实现

创建XMLHttpRequest对象并存储其引用，便于后续操作：

data() {
  return {
    xhr: null,
    downloadProgress: 0,
    isPaused: false
  }
}

发起下载请求时保存xhr对象：

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

  this.xhr.onprogress = (event) => {
    if (event.lengthComputable) {
      this.downloadProgress = Math.round((event.loaded / event.total) * 100);
    }
  };

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

  this.xhr.send();
}

暂停下载时调用abort方法：

pauseDownload() {
  if (this.xhr) {
    this.xhr.abort();
    this.isPaused = true;
  }
}

使用Fetch API实现

结合AbortController实现更现代的暂停控制：

data() {
  return {
    controller: null,
    downloadProgress: 0,
    isPaused: false
  }
}

发起请求时创建AbortController：

async downloadFile() {
  this.controller = new AbortController();
  try {
    const response = await fetch('file-url', {
      signal: this.controller.signal
    });

    const reader = response.body.getReader();
    const contentLength = +response.headers.get('Content-Length');
    let receivedLength = 0;
    let 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 link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'filename.ext';
    link.click();
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('Download aborted');
    }
  }
}

暂停时调用abort方法：

pauseDownload() {
  if (this.controller) {
    this.controller.abort();
    this.isPaused = true;
  }
}

实现断点续传

对于大文件下载，可考虑实现断点续传：

resumeDownload() {
  const rangeHeader = `bytes=${this.downloadedBytes}-`;
  fetch('file-url', {
    headers: { 'Range': rangeHeader },
    signal: this.controller.signal
  });
  // 处理后续分块下载逻辑
}

注意服务端需要支持Range请求头，并正确处理206 Partial Content响应。

UI状态管理

在模板中绑定下载状态：

<button @click="downloadFile" :disabled="!!xhr && !isPaused">
  {{ isPaused ? 'Resume' : 'Download' }}
</button>
<button @click="pauseDownload" :disabled="!xhr || isPaused">
  Pause
</button>
<progress :value="downloadProgress" max="100"></progress>

这种方法提供了基本的下载控制功能，可根据实际需求扩展更复杂的逻辑。

vue实现下载暂停