当前位置：首页 > VUE

vue实现静态文件下载

2026-02-25 19:05:54VUE

使用 `<a>` 标签直接下载

通过 HTML 原生 <a> 标签的 download 属性实现静态文件下载。将文件路径设置为 public 目录下的路径，避免打包工具处理文件。

<template>
  <a href="/files/example.pdf" download>下载PDF文件</a>
</template>

文件需存放在项目根目录的 public/files 文件夹中，Vue 会直接将该目录内容复制到构建输出目录。

vue实现静态文件下载

通过 JavaScript 动态创建下载链接

使用 document.createElement 动态创建 <a> 标签并触发点击事件，适合需要条件触发下载的场景。

vue实现静态文件下载

methods: {
  downloadFile() {
    const link = document.createElement('a')
    link.href = '/files/example.pdf'
    link.download = 'custom-filename.pdf'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
}

使用 axios 处理文件下载

当需要先请求后端接口或处理授权时，可通过 axios 获取文件流并创建下载。

import axios from 'axios'

methods: {
  async downloadFile() {
    const response = await axios.get('/api/download', {
      responseType: 'blob'
    })
    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.download = 'file.pdf'
    link.click()
    window.URL.revokeObjectURL(url)
  }
}

使用第三方库 file-saver

对于更复杂的下载需求，可以引入 file-saver 库简化操作。

npm install file-saver

import { saveAs } from 'file-saver'

methods: {
  downloadFile() {
    const blob = new Blob([fileContent], { type: 'application/pdf' })
    saveAs(blob, 'filename.pdf')
  }
}