vue项目实现文件下载进度条功能

下面是“vue项目实现文件下载进度条功能”的完整攻略：

1. 服务端实现文件下载接口

首先，在服务器端需要实现一个文件下载的接口，将需要下载的文件流返回给客户端。根据不同的后端语言和框架，具体实现会有所差异。这里以 Node.js 和 Express 框架为例，示例如下：

// 下载文件接口
app.get('/download', (req, res) => {
  const filePath = '/path/to/your/file.pdf'
  const stat = fs.statSync(filePath)
  res.setHeader('Content-Length', stat.size)
  res.setHeader('Content-Type', 'application/pdf')
  res.setHeader('Content-Disposition', 'attachment; filename=file.pdf')
  const fileReadStream = fs.createReadStream(filePath)
  fileReadStream.pipe(res)
})

在上述代码中，我们首先指定了一个文件路径 filePath，然后使用 Node.js 的 fs 模块获取该文件的大小 stat.size，并设置了响应头 Content-Length，表示返回数据的长度。接着设置了响应头 Content-Type 和 Content-Disposition，分别指定了返回的数据类型和文件名。最后，创建一个文件读取流 fileReadStream，并将其通过管道 pipe 连接到响应对象 res 中，返回给客户端。

1. 客户端实现文件下载进度条

接下来，在客户端使用 Vue 实现文件下载功能。我们位于 Vue 方法中的代码是，在下载按钮上绑定一个点击事件，当按钮被点击时，调用 download 方法进行文件下载。具体代码如下：

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

<script>
export default {
  methods: {
    download() {
      const xhr = new XMLHttpRequest()
      xhr.open('GET', '/download')
      xhr.responseType = 'blob'
      xhr.onload = () => {
        if (xhr.status === 200) {
          const contentDisposition = xhr.getResponseHeader('Content-Disposition')
          const matchResult = contentDisposition.match(/filename=(.*)/)
          const filename = matchResult ? matchResult[1] : 'file'
          const url = window.URL.createObjectURL(new Blob([xhr.response]))
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', filename)
          document.body.appendChild(link)
          link.click()
          window.URL.revokeObjectURL(url)
          document.body.removeChild(link)
        }
      }
      xhr.onprogress = (event) => {
        if (event.lengthComputable) {
          const percentComplete = event.loaded / event.total * 100
          console.log(`下载进度：${percentComplete.toFixed(2)}%`)
        }
      }
      xhr.send()
    }
  }
}
</script>

在上述代码中，我们首先通过 XMLHttpRequest 对象发起一个 GET 请求，并设置响应类型为 blob。当请求完成时，在 onload 回调中判断返回状态码是否为 200，如果是，则获取响应头中的 Content-Disposition，根据其中的 filename 字段提取出文件名，并创建一个下载链接。在将链接添加到页面后，调用 .click() 方法模拟点击下载链接，下载文件。最后，释放资源并移除下载链接。

需要注意的是，在下载过程中，我们设置 xhr 对象的 onprogress 回调，以便获取下载的进度信息。事件对象中的 loaded 和 total 属性分别表示已下载和总大小，通过计算这两个值可以得出下载进度百分比。在示例代码中，我们简单地将下载百分比输出到控制台，实际项目中可以通过 UI 控件展示下载进度。

1. 示例说明一：下载 Excel 文件

对于文本文件或图片等较小的文件，直接使用上述示例代码已经足够。但对于较大的二进制文件，例如 Excel 文件，建议使用 FileSaver.js 插件进行下载，因为它提供了更好的兼容性和用户体验。

具体步骤是，首先安装 FileSaver.js 包：

npm install file-saver --save

下载按钮的模板代码如下：

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

下载方法的代码如下：

import { saveAs } from 'file-saver'

export default {
  methods: {
    download() {
      const xhr = new XMLHttpRequest()
      xhr.open('GET', '/download')
      xhr.responseType = 'blob'
      xhr.onload = () => {
        if (xhr.status === 200) {
          const contentDisposition = xhr.getResponseHeader('Content-Disposition')
          const matchResult = contentDisposition.match(/filename=(.*)/)
          const filename = matchResult ? matchResult[1] : 'file'
          saveAs(xhr.response, filename)
        }
      }
      xhr.send()
    }
  }
}

这里，我们通过 import 关键字将 FileSaver.js 包中的 saveAs 方法引入，并在 xhr.onload 回调中使用该方法保存下载的文件。需要注意的是，在使用该方法时，不需要为 Blob 对象设置下载链接，因为 FileSaver.js 包内部已经处理了这个过程。

1. 示例说明二：监听下载进度更新 UI

在前面的示例代码中，我们通过控制台输出了下载进度信息，但在实际项目中，我们需要将进度信息以更友好的方式展示给用户，例如更新 UI 上的进度条控件。这里提供一个 Vue 实现的示例：

<template>
  <div>
    <button @click="download">下载文件</button>
    <div>
      下载进度：<span>{{ progress }}%</span>
      <progress :value="progress" max="100" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0
    }
  },
  methods: {
    download() {
      const xhr = new XMLHttpRequest()
      xhr.open('GET', '/download')
      xhr.responseType = 'blob'
      xhr.onload = () => {
        if (xhr.status === 200) {
          const contentDisposition = xhr.getResponseHeader('Content-Disposition')
          const matchResult = contentDisposition.match(/filename=(.*)/)
          const filename = matchResult ? matchResult[1] : 'file'
          saveAs(xhr.response, filename)
          this.progress = 100
        }
      }
      xhr.onprogress = (event) => {
        if (event.lengthComputable) {
          this.progress = event.loaded / event.total * 100
        }
      }
      xhr.send()
    }
  }
}
</script>

在上述代码中，我们添加了一个 <progress> 标签和一个数据属性 progress，用于展示和更新下载进度。在下载响应返回时，将进度条控件完全填满，表示下载完成。在 xhr.onprogress 进度更新回调中，将事件对象的 loaded 和 total 属性转换成百分比，更新到 progress 数据属性中，控件即可相应地显示下载进度。

至此，“Vue 项目实现文件下载进度条功能”的完整攻略就结束了。以上示例分别演示了直接下载和使用 FileSaver.js 插件下载两种情况，同时也展示了如何监听下载进度更新 UI。