Vue中使用a标签下载静态资源文件(如excel、pdf等)纯前端操作方法
更新时间：2025年02月26日 08:34:24 作者：接口写好了吗?
这篇文章主要介绍了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标签（一次性的）
}附：前端Vue实现文件下载提示 失败-未发现文件的解决思路
前端vue中动态创建a标签下载文件
<div name="downloadfile" onclick="downloadClick()">下载模板</div>
//下载模板
downloadClick:function(event){
var link = document.createElement('a');
link.setAttribute("download", "");
link.href = "./static/参会者模板.xls";
link.click();
}
镜像打包部署后，点击下载模板，给出“失败-未发现文件”的提示。
解决思路：
在镜像包中查看该文件是否存在于该路径下
将下载地址打印在浏览器控制台，看完整路径是否存在问题：
加上console.log("href: " + link.href)，复制该地址直接在浏览器中访问（项目有没有配置上下文，如有，看路径中是否会带上了上下文
）
若路径中存在中文，将中文换成英文试试。若英文路径可以正常下载，则有可能是中文乱码的问题，则相应查找解决中文乱码的方法（我这边使用的最简单的方式，将文件名改为了英文，项目中没有要求一定要用中文名，成功下载了。）
总结
到此这篇关于Vue中使用a标签下载静态资源文件(如excel、pdf等)的文章就介绍到这了,更多相关Vue用a标签下载静态资源文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题
这篇文章主要介绍了Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
本文重点给大家介绍Vue拖拽组件开发实例，拖拽的原理是手指在移动的过程中，实时改变元素的位置即top和left值，使元素随着手指的移动而移动。对实例代码感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
vue源码学习之Object.defineProperty 对数组监听
这篇文章主要介绍了vue源码学习之Object.defineProperty 对数组监听，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
localForage是前端本地存储的库,支持多种存储后端,并提供了一致的API来存储和检索数据,这篇文章主要给大家介绍了关于前端本地存储方案localForage在vue3中使用的相关资料,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了Vue el-upload单图片上传功能实现,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue-cli3多页面配置详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了vue.js实现一个会动的简历(包含底部导航功能，编辑功能),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要给大家介绍了关于vue如何调用摄像头实现拍照上传图片、本地上传图片的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了3种vue组件的书写形式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式？这是我们所要探讨的主题,本文总结了 vue 组件间通信的几种方式,需要的朋友可以参考下2025-03-03
最新评论