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

相关推荐
小杨快跑~14 小时前
Vue 3 + Element Plus 表单校验
前端·javascript·vue.js·elementui
hfut028815 小时前
第25章 interface
linux·服务器·网络
我叫张小白。15 小时前
Vue3监视系统全解析
前端·javascript·vue.js·前端框架·vue3
Sinowintop17 小时前
易连EDI-EasyLink SFTP文件传输
运维·服务器·网络·sftp·edi·ftp·国产edi软件
likuolei18 小时前
XML DOM 节点类型
xml·java·服务器
风123456789~19 小时前
【Linux专栏】显示或隐藏行号、批量注释
linux·运维·服务器
WYiQIU19 小时前
11月面了7.8家前端岗,兄弟们12月我先躺为敬...
前端·vue.js·react.js·面试·前端框架·飞书
谢尔登19 小时前
简单聊聊webpack摇树的原理
运维·前端·webpack
娃哈哈哈哈呀20 小时前
formData 传参 如何传数组
前端·javascript·vue.js
只想安静的写会代码20 小时前
centos/ubuntu/redhat配置清华源/本地源
linux·运维·服务器