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标签(一次性的)
}
相关推荐
娃哈哈哈哈呀12 分钟前
formData 传参 如何传数组
前端·javascript·vue.js
tsumikistep1 小时前
【前后端】接口文档与导入
前端·后端·python·硬件架构
513495922 小时前
Vite环境变量配置
vue.js
行走的陀螺仪2 小时前
.vscode 文件夹配置详解
前端·ide·vscode·编辑器·开发实践
2503_928411562 小时前
11.24 Vue-组件2
前端·javascript·vue.js
Bigger2 小时前
🎨 用一次就爱上的图标定制体验:CustomIcons 实战
前端·react.js·icon
谢尔登3 小时前
原来Webpack在大厂中这样进行性能优化!
前端·webpack·性能优化
weixin79893765432...3 小时前
Vue + Express + DeepSeek 实现一个简单的对话式 AI 应用
vue.js·人工智能·express
高级程序源4 小时前
springboot社区医疗中心预约挂号平台app-计算机毕业设计源码16750
java·vue.js·spring boot·mysql·spring·maven·mybatis
cypking4 小时前
Vue 3 + Vite + Router + Pinia + Element Plus + Monorepo + qiankun 构建企业级中后台前端框架
前端·javascript·vue.js