vue中实现文件下载

使用 <a> 标签实现下载

在 Vue 中可以通过动态创建 <a> 标签实现文件下载。这种方法适用于已知文件 URL 的情况。

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

<script>
export default {
  methods: {
    downloadFile() {
      const link = document.createElement('a')
      link.href = 'https://example.com/path/to/file.pdf'
      link.download = 'filename.pdf'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

使用 Blob 对象下载

当需要从 API 获取文件数据时，可以使用 Blob 对象实现下载。

<script>
export default {
  methods: {
    async downloadFile() {
      try {
        const response = await fetch('https://api.example.com/download')
        const blob = await response.blob()
        const url = window.URL.createObjectURL(blob)

        const link = document.createElement('a')
        link.href = url
        link.download = 'file.pdf'
        document.body.appendChild(link)
        link.click()

        window.URL.revokeObjectURL(url)
        document.body.removeChild(link)
      } catch (error) {
        console.error('下载失败:', error)
      }
    }
  }
}
</script>

使用 axios 下载文件

使用 axios 库处理文件下载时，需要设置 responseType: 'blob'。

import axios from 'axios'

export default {
  methods: {
    async downloadFile() {
      try {
        const response = await axios.get('https://api.example.com/download', {
          responseType: 'blob'
        })

        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.download = 'document.pdf'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      } catch (error) {
        console.error('下载失败:', error)
      }
    }
  }
}

处理大文件下载

对于大文件下载，可以显示下载进度。

methods: {
  async downloadLargeFile() {
    try {
      const response = await axios.get('https://example.com/large-file', {
        responseType: 'blob',
        onDownloadProgress: progressEvent => {
          const percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          )
          console.log(`下载进度: ${percentCompleted}%`)
        }
      })

      // 其余下载逻辑与之前相同
    } catch (error) {
      console.error('下载失败:', error)
    }
  }
}

处理后端返回的文件流

当后端返回文件流时，需要正确设置响应头。

async downloadStream() {
  try {
    const response = await axios.get('https://api.example.com/stream', {
      responseType: 'blob'
    })

    // 从响应头获取文件名
    const contentDisposition = response.headers['content-disposition']
    let fileName = 'default.pdf'
    if (contentDisposition) {
      const fileNameMatch = contentDisposition.match(/filename="?(.+)"?/)
      if (fileNameMatch.length > 1) {
        fileName = fileNameMatch[1]
      }
    }

    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.download = fileName
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  } catch (error) {
    console.error('下载失败:', error)
  }
}

注意事项

确保服务器正确设置了 CORS 头部，否则跨域请求可能失败。对于需要认证的请求，需要在请求头中添加认证信息。

axios.get('https://api.example.com/protected-file', {
  responseType: 'blob',
  headers: {
    'Authorization': `Bearer ${token}`
  }
})