vue中使用a标签下载静态资源文件(比如excel、pdf等)后端不参与

原文:vue中使用a标签下载静态资源文件(比如excel、pdf等)后端不参与 - 知乎 (zhihu.com)

可以使用如下代码实现:

1.模板中:

复制代码
<a :href="downloadUrl" download target="_blank">下载文件</a>

2.在 data 中定义 downloadUrl 属性和文件名:

复制代码
data () {
  return {
    downloadUrl: '',
    fileName: '' // 文件名
  }
}

3.在方法中设置 downloadUrl 的值:

复制代码
methods: {
  onDownload () {
    this.downloadUrl = '/static/files/' + this.fileName + '.pdf'
  }
}

在这个例子里,静态文件存储在 /static/files/ 下,可以通过 this.fileName 属性来控制下载的文件名。当用户点击下载链接时,浏览器会自动下载指定的文件。

相关推荐
gyx_这个杀手不太冷静17 小时前
高级前端开发职业规划(2026—2035)
前端·面试·agent
程序员黑豆17 小时前
Java中的null与NullPointerException完全指南:安全处理、实战排查与面试题
java·前端·ai编程
编程快车17 小时前
用 Phaser 4 造一个空间解谜游戏:纯函数棋盘引擎、透明画布分层与轻量双语
前端·程序员
lemon_yyds17 小时前
uVIew2 弹框滚动穿透问题-[uu-popup ]组件
vue.js
可视之道17 小时前
前端图形编辑器的多选框架:从单选到框选到 Shift 连选
前端
3秒一个大17 小时前
JS 数组去重全方案:从基础到通用万能去重函数
前端·javascript
阿黎梨梨17 小时前
读懂一个 Next.js 全栈笔记应用
前端
Titan202418 小时前
Linux网络基础知识
linux·服务器·网络·c++·学习
古茗前端团队18 小时前
代码越改越乱?来试试前端领域模型驱动设计(DDD)
前端·agent·ai编程
Hilaku18 小时前
为什么跳槽涨薪 30% 的时代彻底结束了?聊聊 2026 前端薪资的天花板
前端·javascript·程序员