当前位置：首页 > VUE

vue实现下载暂停

2026-01-12 05:12:31VUE

Vue 实现下载暂停功能

在 Vue 中实现下载暂停功能需要结合前端技术如 fetch 或 XMLHttpRequest 进行控制，以下是具体实现方法：

使用 AbortController 中断请求

通过 AbortController 可以中断正在进行的下载请求，实现暂停效果。

// 在 Vue 组件中
data() {
  return {
    controller: null,
    isDownloading: false,
    downloadProgress: 0
  };
},
methods: {
  startDownload() {
    this.controller = new AbortController();
    this.isDownloading = true;
    fetch('your-download-url', {
      signal: this.controller.signal
    })
    .then(response => {
      const reader = response.body.getReader();
      const contentLength = +response.headers.get('Content-Length');
      let receivedLength = 0;

      const processChunk = ({ done, value }) => {
        if (done) {
          this.isDownloading = false;
          return;
        }
        receivedLength += value.length;
        this.downloadProgress = (receivedLength / contentLength) * 100;
        return reader.read().then(processChunk);
      };
      return reader.read().then(processChunk);
    })
    .catch(err => {
      if (err.name === 'AbortError') {
        console.log('Download aborted');
      }
    });
  },
  pauseDownload() {
    if (this.controller) {
      this.controller.abort();
      this.isDownloading = false;
    }
  }
}

使用 XMLHttpRequest 实现暂停和恢复

XMLHttpRequest 可以获取下载进度并实现更细粒度的控制。

data() {
  return {
    xhr: null,
    downloadedBytes: 0,
    totalBytes: 0,
    isPaused: false
  };
},
methods: {
  startDownload() {
    this.xhr = new XMLHttpRequest();
    this.xhr.open('GET', 'your-download-url', true);
    this.xhr.responseType = 'blob';

    this.xhr.onprogress = (event) => {
      if (event.lengthComputable) {
        this.downloadedBytes = event.loaded;
        this.totalBytes = event.total;
      }
    };

    this.xhr.onload = () => {
      if (this.xhr.status === 200) {
        const blob = this.xhr.response;
        // 处理下载完成的 blob
      }
    };

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

实现断点续传

对于大文件下载，可以结合服务器支持实现断点续传。

resumeDownload() {
  this.xhr = new XMLHttpRequest();
  this.xhr.open('GET', 'your-download-url', true);
  this.xhr.setRequestHeader('Range', `bytes=${this.downloadedBytes}-`);
  this.xhr.responseType = 'blob';

  this.xhr.onprogress = (event) => {
    // 更新进度
  };

  this.xhr.send();
}