vue根据文件下载进度显示进度条

可以使用Vue.js提供的进度条组件和XMLHttpRequest对象来实现文件下载进度的显示。

1. 在Vue.js中引入进度条组件，例如使用NProgress：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

2. 在需要下载文件的地方，使用XMLHttpRequest对象进行文件下载，并监听其progress事件：

downloadFile() {
  // 显示进度条
  NProgress.start()

  const xhr = new XMLHttpRequest()
  xhr.open('GET', 'your-file-url', true)
  xhr.responseType = 'blob'

  xhr.addEventListener('progress', event => {
    if (event.lengthComputable) {
      // 更新进度条
      const percent = event.loaded / event.total * 100
      NProgress.set(percent)
    }
  })

  xhr.onload = () => {
    if (xhr.status === 200) {
      // 下载完成后隐藏进度条
      NProgress.done()

      // 处理下载的文件
      const filename = 'your-filename'
      const a = document.createElement('a')
      const url = window.URL.createObjectURL(xhr.response)
      a.href = url
      a.download = filename
      document.body.appendChild(a)
      a.click()
      window.URL.revokeObjectURL(url)
    }
  }

  xhr.send()
}

3. 在模板中使用进度条组件进行显示：

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
    <nprogress></nprogress>
  </div>
</template>