当前位置：首页 > VUE

vue实现下载暂停

2026-03-27 03:04:19VUE

Vue实现下载暂停功能

在Vue中实现下载暂停功能，可以通过XMLHttpRequest或Fetch API结合AbortController来控制下载过程。以下是具体实现方法：

vue实现下载暂停

使用XMLHttpRequest实现

XMLHttpRequest对象提供了直接控制请求的能力，可以通过其abort()方法暂停下载。

vue实现下载暂停

// 在Vue组件中
data() {
  return {
    xhr: null,
    isDownloading: false
  }
},
methods: {
  startDownload() {
    this.isDownloading = true
    this.xhr = new XMLHttpRequest()
    this.xhr.open('GET', 'your-file-url', true)
    this.xhr.responseType = 'blob'

    this.xhr.onprogress = (event) => {
      // 更新下载进度
      const progress = Math.round((event.loaded / event.total) * 100)
      console.log(`下载进度: ${progress}%`)
    }

    this.xhr.onload = (event) => {
      const blob = new Blob([this.xhr.response])
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = 'filename.ext'
      document.body.appendChild(a)
      a.click()
      window.URL.revokeObjectURL(url)
      this.isDownloading = false
    }

    this.xhr.send()
  },

  pauseDownload() {
    if (this.xhr && this.isDownloading) {
      this.xhr.abort()
      this.isDownloading = false
      console.log('下载已暂停')
    }
  }
}

使用Fetch API和AbortController实现

Fetch API配合AbortController提供了更现代的暂停下载方式。

// 在Vue组件中
data() {
  return {
    controller: null,
    isDownloading: false
  }
},
methods: {
  async startDownload() {
    this.isDownloading = true
    this.controller = new AbortController()

    try {
      const response = await fetch('your-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
        const progress = Math.round((receivedLength / contentLength) * 100)
        console.log(`下载进度: ${progress}%`)
      }

      const blob = new Blob(chunks)
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = 'filename.ext'
      document.body.appendChild(a)
      a.click()
      URL.revokeObjectURL(url)
      this.isDownloading = false
    } catch (err) {
      if (err.name === 'AbortError') {
        console.log('下载已暂停')
      } else {
        console.error('下载错误:', err)
      }
    }
  },

  pauseDownload() {
    if (this.controller && this.isDownloading) {
      this.controller.abort()
      this.isDownloading = false
    }
  }
}

实现断点续传

要实现更高级的暂停后继续下载功能（断点续传），需要服务器支持Range请求。

// 在Vue组件中
methods: {
  async resumeDownload() {
    const fileSize = await this.getFileSize()
    const downloadedSize = this.getLocalFileSize() // 从本地存储获取已下载大小

    const response = await fetch('your-file-url', {
      headers: {
        'Range': `bytes=${downloadedSize}-`
      }
    })

    // 处理响应并追加到已有文件
  },

  async getFileSize() {
    const response = await fetch('your-file-url', {
      method: 'HEAD'
    })
    return response.headers.get('Content-Length')
  }
}