Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作

第一步,public文件夹下新建static文件夹存放静态资源

我存放了一个 .docx文件,当然,你可以存放pdf/word 等文件都可以。

第二步,模拟a标签下载

复制代码
//html部分

<el-button type="primary" plain @click="download">本地下载</el-button>

//js部分

// 授权书下载
download() {
   // 通过a标签来实现下载
   var a = document.createElement("a") //创建一个<a></a>标签
    a.href = "/static/签约授权书.docx" //给a标签的href属性值加上地址,注意,这里是绝对路径,不用    加 点.
    a.download = "签约授权书.docx" //设置下载文件文件名,这里加上.docx指定文件类型,pdf文件就指定.pdf即可
    a.style.display = "none" //隐藏a标签
    document.body.append("a") //将a标签追加到document.body中
    a.click() //模拟点击a标签,会触发a标签的href的读取,浏览器就会自动下载了
    a.remove() // 删除a标签(一次性的)
}
相关推荐
计算机毕设VX:Fegn08957 小时前
计算机毕业设计|基于springboot + vue图书商城系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·课程设计
哆啦A梦15887 小时前
商城后台管理系统 03 登录布局
javascript·vue.js·elementui
曼巴UE57 小时前
UE FString, FName ,FText 三者转换,再次学习,官方文档理解
服务器·前端·javascript
行走的陀螺仪8 小时前
高级前端 Input 公共组件设计方案(Vue3 + TypeScript)
前端·javascript·typescript·vue·组件设计方案
一颗不甘坠落的流星9 小时前
【Antd】基于 Upload 组件,导入Json文件并转换为Json数据
前端·javascript·json
LYFlied9 小时前
Vue2 与 Vue3 虚拟DOM更新原理深度解析
前端·javascript·vue.js·虚拟dom
Lucky_Turtle9 小时前
【Node】npm install报错npm error Cannot read properties of null (reading ‘matches‘)
前端·npm·node.js
小飞侠在吗9 小时前
vue shallowRef 与 shallowReacitive
前端·javascript·vue.js
惜分飞10 小时前
sql server 事务日志备份异常恢复案例---惜分飞
前端·数据库·php