当前位置：首页 > VUE

vue实现大文件下载

2026-01-20 16:43:02VUE

实现大文件下载的方法

在Vue中实现大文件下载时，需要考虑文件分片、进度显示和错误处理等问题。以下是几种常见的方法：

使用axios进行文件下载

axios可以配合Blob对象处理大文件下载，并显示下载进度：

axios({
  url: '/api/download',
  method: 'GET',
  responseType: 'blob',
  onDownloadProgress: (progressEvent) => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    )
    console.log(percentCompleted)
  }
}).then(response => {
  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()
  link.remove()
})

分片下载实现

对于超大文件，可以采用分片下载的方式：

async function downloadLargeFile(url, fileName, chunkSize = 1024 * 1024) {
  const fileSize = await getFileSize(url)
  let received = 0
  const chunks = []

  while(received < fileSize) {
    const end = Math.min(received + chunkSize, fileSize) - 1
    const response = await fetch(url, {
      headers: { 'Range': `bytes=${received}-${end}` }
    })
    chunks.push(await response.blob())
    received += (end - received + 1)
    updateProgress(received / fileSize * 100)
  }

  const blob = new Blob(chunks)
  saveAs(blob, fileName)
}

使用StreamSaver.js处理超大文件

StreamSaver.js适合处理GB级别的文件下载：

vue实现大文件下载

import streamSaver from 'streamsaver'

async function streamDownload(url) {
  const fileStream = streamSaver.createWriteStream('large-file.bin')
  const response = await fetch(url)
  const readableStream = response.body

  if (window.WritableStream && readableStream.pipeTo) {
    return readableStream.pipeTo(fileStream)
  }

  const writer = fileStream.getWriter()
  const reader = response.body.getReader()
  const pump = () => reader.read()
    .then(res => res.done 
      ? writer.close() 
      : writer.write(res.value).then(pump))

  pump()
}