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 分钟前
低版本pdfjs升级
前端·javascript·vue.js
阿里巴巴终端技术12 分钟前
二十年,重新出发!第 20 届 D2 技术大会「AI 新」议题全球征集正式开启
前端·react.js·html
卤蛋fg620 分钟前
vue 可视化表单设计器 vxe-form-design 创建自定义控件的详细用法(教程一)
vue.js
阿祖zu23 分钟前
2025 AI 总结:技术研发的技能升维与职业路径系统重构的思考
前端·后端·ai编程
IT_陈寒27 分钟前
Vite 5分钟性能优化实战:从3秒到300ms的冷启动提速技巧(附可复用配置)
前端·人工智能·后端
迦南giser28 分钟前
webpack从0到1详解
前端·javascript·css·webpack·node.js
xkxnq28 分钟前
第二阶段:Vue 组件化开发(第 26天)
前端·javascript·vue.js
华玥作者31 分钟前
uni-app + Vite 项目中使用 @uni-helper/vite-plugin-uni-pages 实现自动路由配置(超详细)
前端·uni-app·vue·vue3·vite
m0_7482546633 分钟前
HTML 文本格式化基础
前端·html
十六年开源服务商34 分钟前
WordPress集成GoogleAnalytics最佳实践指南
前端·人工智能·机器学习