当前位置: 首页 > article >正文

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标签(一次性的)
}

http://www.kler.cn/a/451325.html

相关文章:

  • 在MySQL 主库上进行自动清理 purged gtid 时,会等待 binlog复制到从库吗
  • StarRocks一次复杂查询引起的Planner超时异常
  • Mysql InnoDB存储引擎中聚簇索引和非聚簇索引的区别
  • 14-zookeeper环境搭建
  • java Redis 操作工具类封装(备忘)
  • 重温设计模式--状态模式
  • 【落羽的落羽 C语言篇】自定义类型——联合体、枚举
  • 【每日学点鸿蒙知识】沙箱目录、图片压缩、characteristicsArray、gm-crypto 国密加解密、通知权限
  • PyTorch 神经网络回归(Regression)任务:关系拟合与优化过程
  • 首次接触结构安全自动化监测系统,价格高吗?后期维护?
  • FreeRTOS的任务挂起和恢复
  • 高阶:基于Python paddleocr库 提取pdf 文档高亮显示的内容
  • eNSP安装教程(内含安装包)
  • 如何制作期末成绩查询小程序系统?
  • 【magic-dash】01:magic-dash创建单页面应用及二次开发
  • Cornerstone3d 基础概念
  • ECharts散点图-气泡图,附视频讲解与代码下载
  • Pytorch文件夹结构
  • 2024 年12月英语六级CET6听力原文(Long Conersation和Passage)
  • Java期末复习JDBC|网课笔记+校课总结
  • 麒麟系统修改配置镜像源地址并安装openGL
  • WebAssembly与WebGL结合:高性能图形处理
  • Python知识分享第三十五天-Pandas分组聚合
  • Linux 静默安装weblogic及JDK安装
  • chrome主页被被篡改的修复方法
  • 安全见闻(2)