vue下载文件流

在Vue.js中下载文件流可以通过以下步骤实现：

  1. 发送请求获取文件流 ：
  • 使用Axios或Fetch API发送请求，并指定responseType为blob以接收文件流数据。
  1. 创建Blob对象 ：
  • 将获取到的文件流数据作为参数传递给Blob构造函数，创建一个Blob对象。
  1. 创建下载链接并触发下载 ：

  • 使用URL.createObjectURL()方法创建一个指向Blob对象的URL。

  • 创建一个隐藏的<a>标签，设置其href属性为Blob URL，并设置download属性为下载的文件名。

  • 触发该<a>标签的点击事件来开始下载过程，并在下载完成后释放URL对象。

以下是一个在Vue 3中实现文件流下载的示例代码：

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

<script>
import axios from 'axios'；

export default {
  methods: {
    async downloadFile() {
      try {
        const response = await axios({
          url: '/path/to/your/file', // 替换为实际文件路径
          method: 'GET',
          responseType: 'blob' // 重要：指定响应类型为 blob
        })；
        this.processBlob(response.data)；
      } catch (error) {
        console.error('文件下载失败', error)；
      }
    },
    processBlob(data) {
      const blob = new Blob([data], { type: 'application/octet-stream' })； // 根据文件类型调整 MIME 类型
      const fileUrl = URL.createObjectURL(blob)；
      const link = document.createElement('a')；
      link.href = fileUrl；
      link.download = 'example.txt'； // 文件名
      link.style.display = 'none'；
      document.body.appendChild(link)；
      link.click()；
      document.body.removeChild(link)；
      URL.revokeObjectURL(fileUrl)； // 清除 URL 对象
    }
  }
}；
</script>

建议

  • 确保服务器端支持文件流传输，并且返回正确的Content-Type和Content-Disposition头。

  • 在实际应用中，可能需要根据文件类型调整MIME类型。

  • 如果需要支持IE浏览器，可能需要额外的处理来兼容旧版浏览器。

Top
×
×