当前位置：首页 > VUE

vue实现本地文件下载

2026-02-23 02:32:48VUE

使用 `<a>` 标签下载

通过动态创建 <a> 标签并设置 download 属性实现文件下载。适用于已知文件路径或 Blob 数据：

vue实现本地文件下载

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

<script>
export default {
  methods: {
    downloadFile() {
      const link = document.createElement('a')
      link.href = '/path/to/file.pdf' // 文件路径或Blob URL
      link.download = 'filename.pdf' // 下载文件名
      link.click()
    }
  }
}
</script>

使用 Blob 对象下载二进制数据

适用于从 API 获取二进制数据（如后端返回文件流）的场景：

vue实现本地文件下载

<script>
export default {
  methods: {
    async downloadFromAPI() {
      const response = await fetch('/api/download')
      const blob = await response.blob()
      const url = URL.createObjectURL(blob)

      const a = document.createElement('a')
      a.href = url
      a.download = 'document.pdf'
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url)
    }
  }
}
</script>

使用 FileSaver.js 库

通过第三方库简化下载流程，支持更复杂的场景：

npm install file-saver

<script>
import { saveAs } from 'file-saver'

export default {
  methods: {
    saveFile() {
      const blob = new Blob(['文件内容'], { type: 'text/plain;charset=utf-8' })
      saveAs(blob, 'example.txt')
    }
  }
}
</script>

下载 Base64 编码文件

处理 Base64 格式的文件数据：

<script>
export default {
  methods: {
    downloadBase64() {
      const base64Data = 'data:application/pdf;base64,JVBERi0x...'
      const link = document.createElement('a')
      link.href = base64Data
      link.download = 'file.pdf'
      link.click()
    }
  }
}
</script>