当前位置：首页 > VUE

vue文件下载怎么实现

2026-02-22 02:35:21VUE

Vue 文件下载实现方法

使用 `<a>` 标签下载

通过创建隐藏的 <a> 标签并设置 download 属性实现文件下载：

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

<script>
export default {
  methods: {
    downloadFile() {
      const link = document.createElement('a')
      link.href = '文件URL或Blob对象'
      link.download = '文件名.扩展名'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

使用 Blob 对象下载

当需要从API获取文件数据时，可以使用Blob对象：

axios.get('文件API地址', { responseType: 'blob' })
  .then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.download = '文件名.扩展名'
    document.body.appendChild(link)
    link.click()
    window.URL.revokeObjectURL(url)
    document.body.removeChild(link)
  })

使用 FileSaver.js 库

安装 FileSaver 库简化下载流程：

npm install file-saver

使用示例：

import { saveAs } from 'file-saver'

// 从URL下载
saveAs('文件URL', '文件名.扩展名')

// 从Blob下载
axios.get('文件API地址', { responseType: 'blob' })
  .then(response => {
    saveAs(response.data, '文件名.扩展名')
  })

处理大文件分块下载

对于大文件，可以实现分块下载：

async function downloadLargeFile(url, fileName) {
  const response = await fetch(url)
  const reader = response.body.getReader()
  const contentLength = +response.headers.get('Content-Length')
  let receivedLength = 0
  const chunks = []

  while(true) {
    const { done, value } = await reader.read()
    if(done) break
    chunks.push(value)
    receivedLength += value.length
    console.log(`下载进度: ${(receivedLength/contentLength*100).toFixed(2)}%`)
  }

  const blob = new Blob(chunks)
  saveAs(blob, fileName)
}

服务端配合实现

Node.js 服务端示例（Express）：

router.get('/download', (req, res) => {
  const filePath = '/path/to/file'
  res.download(filePath, '自定义文件名.ext', (err) => {
    if(err) console.error('下载出错', err)
  })
})