vue实现静态文件下载
使用 <a> 标签直接下载
通过 HTML 原生 <a> 标签的 download 属性实现静态文件下载。将文件路径设置为 public 目录下的路径，避免打包工具处理文件。
<template>
<a href="/files/example.pdf" download>下载PDF文件</a>
</template>文件需存放在项目根目录的 public/files 文件夹中，Vue 会直接将该目录内容复制到构建输出目录。
通过 JavaScript 动态创建下载链接
使用 document.createElement 动态创建 <a> 标签并触发点击事件，适合需要条件触发下载的场景。
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-saverimport { saveAs } from 'file-saver'
methods: {
downloadFile() {
const blob = new Blob([fileContent], { type: 'application/pdf' })
saveAs(blob, 'filename.pdf')
}
}注意事项
- 静态文件应存放在
public目录而非assets目录，避免被 webpack 处理 - 动态生成下载链接后需要及时释放对象 URL 防止内存泄漏
- 跨域下载需确保服务器配置正确的 CORS 头信息
- 大文件下载建议显示进度条提示用户
