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

相关推荐
猫3283 分钟前
echarts 日常问题解决
前端·javascript·echarts
新中地GIS开发老师6 分钟前
地信职业百科④:GIS开发工程师
前端·数据库·gis·webgis·三维gis开发
我是大卫15 分钟前
【图】React源码解析-从数据结构、调度器、源码设计模式到状态计算引擎,深挖useReducer原理
前端·react.js·源码
霸道流氓气质21 分钟前
ApiPost 中配置自动获取 Token 并调用业务接口完整指南
java·服务器·数据库
willes21 分钟前
列表中的倒计时组件
前端
LVZ23 分钟前
用了半年 AI 写代码,最烦的不是代码,是环境
前端·后端·开源
polaris_tl24 分钟前
一行 `compress: false`,为什么让 SSE 首包恢复实时返回
前端
海边的云26 分钟前
别再让 AI 瞎改代码:一套让大模型「收敛」的前端专家 Skill》
前端
kisshyshy26 分钟前
给端侧大模型装上“发动机”:React 合成事件 + 进度条组件全解
前端·react.js·node.js
hunterandroid37 分钟前
DataStore 工程化实践:迁移、并发更新与异常恢复
android·前端