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项目通过a标签下载图片至zip包的示例代码

Vue的模板语法以及实战案例
Vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据,下面这篇文章主要给大家介绍了关于Vue的模板语法以及案例的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
从0到1构建vueSSR项目之node以及vue-cli3的配置
这篇文章主要介绍了从0到1构建vueSSR项目之node以及vue-cli3的配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
详解如何在Vue3+TS的项目中使用NProgress进度条
本文主要介绍了详解如何在Vue3+TS的项目中使用NProgress进度条，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
Vue.js学习示例分享
本篇和大家分享的是学习Vuejs的总结和调用webapi的一个小示例；具有一定的参考价值，下面跟着小编一起来看下吧
2017-02-02
Vue多请求并行处理的实战指南
在Vue中同时发送多个请求主要通过并行处理机制实现,常用方法包括 Promise.all,axios.all和 async/await,下面小编就来和大家详细介绍一下详细操作吧
2025-08-08
vue中如何获取当前路由name
这篇文章主要介绍了vue中如何获取当前路由name，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue-router钩子函数实现路由守卫
这篇文章主要介绍了vue-router钩子函数实现路由守卫，对vue感兴趣的同学，可以参考下
2021-04-04
vue前端重构computed及watch组件通信等实用技巧整理
这篇文章主要为大家介绍了vue前端重构computed及watch组件通信等实用技巧整理，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-05-05
解决Vue watch里调用方法的坑
这篇文章主要介绍了解决Vue watch里调用方法的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
elementUI如何动态给el-tree添加子节点数据children详解
element-ui 目前基本成为前端pc网页端标准ui框架,下面这篇文章主要给大家介绍了关于elementUI如何动态给el-tree添加子节点数据children的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11