vue如何实现下载

实现文件下载的方法

使用<a>标签下载 通过创建隐藏的<a>标签并设置download属性实现文件下载，适用于已知文件URL的情况：

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

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

Blob对象下载 当需要下载后端返回的二进制流数据时，可以使用Blob对象：

axios.get('/api/download', { responseType: 'blob' }).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]))
  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)
})

文件流下载处理 处理可能出现的文件名从响应头中获取的情况：

axios.get('/api/download', { responseType: 'blob' }).then(response => {
  const contentDisposition = response.headers['content-disposition']
  const fileName = contentDisposition.split('filename=')[1]
  const blob = new Blob([response.data])
  const downloadUrl = URL.createObjectURL(blob)
  const anchor = document.createElement('a')
  anchor.href = downloadUrl
  anchor.download = decodeURIComponent(fileName)
  anchor.click()
  URL.revokeObjectURL(downloadUrl)
})

大文件分块下载 对于大文件下载，可以显示下载进度：

axios.get('/api/large-file', {
  responseType: 'blob',
  onDownloadProgress: progressEvent => {
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
    console.log(`下载进度: ${percentCompleted}%`)
  }
}).then(response => {
  // 处理下载完成的文件
})

注意事项

• 跨域问题需要后端配置CORS
• 某些浏览器可能限制自动下载行为
• 移动端浏览器对下载的支持可能有差异
• 大文件下载建议提供进度提示

服务端配合 后端应正确设置响应头：

Content-Type: application/octet-stream
Content-Disposition: attachment; filename="filename.ext"