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标签(一次性的)
}
相关推荐
x-cmd5 分钟前
[250512] Node.js 24 发布:ClangCL 构建,升级 V8 引擎、集成 npm 11
前端·javascript·windows·npm·node.js
夏之小星星18 分钟前
el-tree结合checkbox实现数据回显
前端·javascript·vue.js
crazyme_632 分钟前
前端自学入门:HTML 基础详解与学习路线指引
前端·学习·html
撸猫79141 分钟前
HttpSession 的运行原理
前端·后端·cookie·httpsession
亦世凡华、1 小时前
Rollup入门与进阶:为现代Web应用构建超小的打包文件
前端·经验分享·rollup·配置项目·前端分享
琉璃℡初雪1 小时前
vue2/3 中使用 @vue-office/docx 在网页中预览(docx、excel、pdf)文件
vue.js·pdf·excel
Bl_a_ck1 小时前
【React】Craco 简介
开发语言·前端·react.js·typescript·前端框架
augenstern4162 小时前
webpack重构优化
前端·webpack·重构
海拥✘2 小时前
CodeBuddy终极测评:中国版Cursor的开发革命(含安装指南+HTML游戏实战)
前端·游戏·html
寧笙(Lycode)3 小时前
React系列——HOC高阶组件的封装与使用
前端·react.js·前端框架