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 属性来控制下载的文件名。当用户点击下载链接时,浏览器会自动下载指定的文件。

相关推荐
chéng ௹44 分钟前
vue2 上传pdf,拖拽盖章,下载图片
前端·css·pdf
嗯.~1 小时前
【无标题】如何在sheel中运行Spark
前端·javascript·c#
A_aspectJ3 小时前
【Bootstrap V4系列】学习入门教程之 组件-输入组(Input group)
前端·css·学习·bootstrap·html
兆。4 小时前
电子商城后台管理平台-Flask Vue项目开发
前端·vue.js·后端·python·flask
互联网搬砖老肖4 小时前
Web 架构之负载均衡全解析
前端·架构·负载均衡
Xena_Networks4 小时前
SierraNet协议分析使用指导[RDMA]| 如何设置 NVMe QP 端口以进行正确解码
linux·服务器·网络
purrrew4 小时前
【Java ee初阶】网络原理
java·运维·服务器·网络·网络协议·udp·java-ee
sunbyte5 小时前
Tailwind CSS v4 主题化实践入门(自定义 Theme + 主题模式切换)✨
前端·javascript·css·tailwindcss
python算法(魔法师版)5 小时前
数据库故障排查指南:从连接问题和性能优化
服务器·网络·数据库·性能优化
滴水之功5 小时前
Ubuntu22.04怎么退出Emergency Mode(紧急模式)
linux·运维·服务器