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_StarX6 分钟前
web程序设计期末复习-填空题
前端·学习·html·web·大学生·期末考
几何心凉10 分钟前
4 年融资 1 亿美金,ProtonBase 背后的技术雄心 |专访小质科技 CEO 王绍翾
前端
得物技术11 分钟前
得物研发自测 & 前端自动化测试体系建设
前端·测试
是忽然之间27 分钟前
vue对接帆软bi
前端
海底火旺29 分钟前
从零实现语音合成:基于火山引擎TTS的前端实践
前端·人工智能·react.js
jackeyfive30 分钟前
最快速搭建博客并部署到 GitHub Pages
前端·github
前端付豪31 分钟前
汇丰实时风控数据流揭秘:Kafka + Flink + CEP 规则引擎全链路实战
前端·后端·架构
Sibyllala35 分钟前
UE5.4——使用UltraDynamicSky实现天气切换和时间变化
前端
溪饱鱼1 小时前
第七章: SEO与渲染方式 三
前端·seo
TE-茶叶蛋1 小时前
React & Vue 编译/运行流程
前端·vue.js·react.js