拓展：下载进度

XHR

const xhr = new XMLHttpRequest()
xhr.open('GET', '/download-endpoint') // 替换为实际的下载端点
xhr.responseType = 'blob'

xhr.addEventListener('progress', (event) => {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100
    console.log(`Download progress: ${percentComplete.toFixed(2)}%`)
  }
})

xhr.onload = () => {
  if (xhr.status === 200) {
    const blob = xhr.response
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = 'filename.ext'
    a.click()
    URL.revokeObjectURL(url)
    console.log('下载完成')
  } else {
    console.error('下载失败', xhr.statusText)
  }
}

xhr.send()

Fetch

fetch('/download-endpoint')
  .then((response) => {
    const contentLength = response.headers.get('Content-Length')
    const total = parseInt(contentLength, 10)
    let loaded = 0

    const reader = response.body.getReader()
    const stream = new ReadableStream({
      start(controller) {
        function push() {
          reader.read().then(({ done, value }) => {
            if (done) {
              controller.close()
              return
            }
            loaded += value.length
            const percentComplete = (loaded / total) * 100
            console.log(`Download progress: ${percentComplete.toFixed(2)}%`)
            controller.enqueue(value)
            push()
          })
        }
        push()
      },
    })

    return new Response(stream)
  })
  .then((response) => response.blob())
  .then((blob) => {
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = 'filename.ext'
    a.click()
    URL.revokeObjectURL(url)
    console.log('下载完成')
  })
  .catch((error) => {
    console.error('下载失败', error)
  })

Axios

axios
  .get('/download-endpoint', {
    responseType: 'blob',
    onDownloadProgress: (progressEvent) => {
      const percentComplete = (progressEvent.loaded / progressEvent.total) * 100
      console.log(`Download progress: ${percentComplete.toFixed(2)}%`)
    },
  })
  .then((response) => {
    const blob = response.data
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = 'filename.ext'
    a.click()
    URL.revokeObjectURL(url)
    console.log('下载完成')
  })
  .catch((error) => {
    console.error('下载失败', error)
  })