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

相关推荐
大明者省13 分钟前
Ubuntu22.04 宝塔面板与 XFCE 远程桌面端口兼容性分析
运维·服务器·数据库·笔记
@菜菜_达17 分钟前
jquery.inputmask插件介绍
前端·javascript·jquery
QuZhengRong17 分钟前
【Luck-Report】缓存
java·前端·后端·vue·excel
jiayong2322 分钟前
前端面试题库 - 浏览器与网络篇
前端·网络·面试
Csvn25 分钟前
小程序开发:微信小程序与 uni-app 实战指南
前端
摸鱼小李上线了32 分钟前
vue项目页面添加水印实现方法
前端·javascript·vue.js
Harm灬小海34 分钟前
【云计算学习之路】学习Centos7系统-Linux软件包管理
linux·运维·服务器·学习·云计算·yum·rpm
1892280486136 分钟前
NY379固态MT29F32T08GSLBHL8-36QA:B
大数据·服务器·人工智能·科技·缓存
砍材农夫38 分钟前
物联网 基于netty构建mqtt协议规范(主题通配符订阅)
java·前端·javascript·物联网·netty
彩票管理中心秘书长41 分钟前
智能体状态指示:何时思考、何时调用工具、何时出错
前端·后端·程序员