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

相关推荐
懒羊羊我小弟2 分钟前
Vue与React组件化设计对比
前端·vue.js·react.js
_朱志强7 分钟前
解决前端vue项目在linux上,npm install,node-sass 安装失败的问题
linux·前端·vue.js
excel34 分钟前
webpack 检出图 第 二 节
前端
excel37 分钟前
webpack 检出图 第 一 节
前端
专注前端不学习一天浑身难受37 分钟前
基于uniapp 实现画板签字
前端·uniapp
低代码布道师39 分钟前
加油站小程序实战教程11会员注册
前端·javascript·低代码·小程序
好_快42 分钟前
Lodash源码阅读-apply
前端·javascript·源码阅读
好_快42 分钟前
Lodash源码阅读-getNative
前端·javascript·源码阅读
luoganttcc2 小时前
Cesium 加载 本地 b3dm 格式文件 并且 获取鼠标点击处经纬度 (亲测可用)
前端·javascript·3d
野生派蒙2 小时前
Linux:显示 -bash-4.2$ 问题(CentOS 7)
linux·运维·服务器·centos·bash