Vue 通过a标签下载文件

最新推荐文章于 2024-05-16 15:38:41 发布
最新推荐文章于 2024-05-16 15:38:41 发布
阅读量5.5k 收藏 5
点赞数 3
分类专栏： vue下载文件 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46007066/article/details/108996942
版权

vue前端点击某个a便签需要下载对应文件，href为下载路径，download为下载文件名

这是Vue-cli3 写法 因为public文件夹是静态拷贝。 并不要把文件放到src>assets里面 因为assets中的文件会经过 webpack 打包，重新编译。

	<a href="./public/static/file/下载一个文件.docx" download="我是阿超.docx">下载文件</a>

vue-cli3 文件目录

在这里插入图片描述

而 vue-cli2 需要下载的文件就需要放在 static里面了 因为在vue-cli3 static 被移除掉了

在这里插入图片描述

阿超郎个郎
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用a标签下载文件_vue+iview 通过a标签实现文件下载
weixin_39613208的博客
12-20 1892
vue+iview 通过a标签实现文件下载方法一：注意: 如果下载的文件放在本地目录下，一定要将模板文件放到 public 目录下，否则由于权限问题找不到文件路径： 项目更目录--》public--》tpls--》下载模板.xls1.1 直接使用a标签 + download属性下载{{ downTplNm }}模板1.2 定义文件下载地址和文件名methods: {type2Obj: functi...
前端vue下使用a标签实现下载本地文件的功能
热门推荐
MengRui2333的博客
01-07 1万+
vue的static文件夹中放这个要下载的文件模板，名字可以随意但必须是英文的，前端可以通过设置download内容修改下载后的名字，这里可以是中文的。 <a href="../../../static/template.csv" download="分析模板.csv"> <img src="../assets/image/download.png" widt...
前端用a标签实现静态资源文件(excel/word/pdf)下载
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
04-24 1971
介绍了前端如何使用a标签实现静态资源文件(excel/word/pdf)下载。
Vue学习-如何在vue项目中通过a标签 download 下载本地文件
qq_43762607的博客
05-23 3204
如何在vue项目中通过a标签 download 下载本地文件？ 一般来说我们会将vue项目的静态资源放在src的assets目录下。但如果我们将需要下载的，例如doc文件放在同样的目录下就会出现下载失败，找不到目标文件的错误。 其实只需要将需要下载的文件放在public，也就是和index.html文件一个文件夹下即可，如下图： 然后在需要进行点击下载文件的地方添加如下代码： <a href="./需要下载的文件名" download>点击下载</a> 就可以实现下载啦。 ..
a标签的href属性 download属性
Julienling的博客
05-03 2891
href属性 点击前往其他站点 指向本站点的某个文件，比如图片 绝对路径：比如"https:runoob.com" 相对路径：比如"./static/wu5.jpg" base64编码的图像数据 download 属性 H5的新增属性 指定且只能指定，下载后的默认文件名字和文件后缀。注意，可以不指定后缀名，浏览器会根据数据类型自动为其匹配后缀名，但是最好指定后缀。 <a href="base64..." download="after">SAVE</a>.
vue使用a标签 download属性下载本地资源
weixin_48205715的博客
07-16 1029
直接放代码，大概功能是能将本地的文件放置页面供其他人下载 参考模板请点击下载： <a href="/eg.xlsx" download="eg.xlsx" class="down">example.xlsx</a> 将本地文件放在vue项目下的public里面，这点很重要，我之前放在了static目录下，硬是排了半天错，所以放在public目录下！！！ ...
vue-以文件流-blob-的形式-下载-导出文件操作
10-14
// 移除a标签 } ``` 然而，对于Internet Explorer（IE）等较旧的浏览器，`download`属性可能不被支持。为了解决兼容性问题，我们可以使用`iframe`来实现下载： ```javascript function downloadUrlForIE(fileBlob...
vue+axios实现post文件下载
10-16
然后，我们将这个`a`标签添加到文档中，模拟点击事件来触发文件下载。最后，我们移除`a`标签并释放Blob URL，以避免内存泄漏。 请注意，为了兼容旧版浏览器，这里使用了`setTimeout`来延迟删除`a`标签和释放URL，这...
vue实现点击按钮下载文件功能
01-19
项目中需要用到文件下载功能,查了资料发现需要用到a标签的特性,但是这边需要用到点击按钮下载,懒得写样式,于是用了以下代码. $router.push(>查看软件 ...
在VUE中实现文件下载并判断状态的方法
12-13
这样，我们就实现了在Vue中通过axios实现文件下载，并根据服务器响应状态判断下载是否成功。注意，这里的'300'和'200'是假设的返回值，实际应用中应根据后端接口的实际响应进行调整。同时，这个方法依赖于axios的...
vue+axios实现文件下载及vue中使用axios的实例
10-17
下面将详细介绍如何使用 Vue 和 Axios 实现文件下载，以及在 Vue 项目中配置 Axios 的方法。 ### 文件下载流程 1. **接口准备**：首先，你需要与后端开发人员协调，确保他们提供的接口已经正确设置了响应头（`...
文件下载带进度条的哦很实用
11-08
文件下载带进度条的哦很实用
vue里面调后台接口后用a标签单个下载和批量下载_vue &lt；a href 查询接口后(1)
最新发布
2401_84620100的博客
05-16 335
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】**二、批量下载文件，同样是调后台接口传多个id、过去。前端用a、标签下载，由于文件太多，这里是生成一个zip包，下载后，解压缩zip包就可以了。**
Vue的href动态拼接绑定
weixin_33913332的博客
03-04 2502
1 <div id="appp"> 2 <table> 3 <tr v-for="item in sites"> 4 <td> 5 <a :href="'addalarmnotes.do?alarmId='+item.id+'&activetyp...
vue 文件流导出下载
晓风揽月
11-22 851
业务场景：点击下载按钮，请求接口后，js下载接口返回的文件流，并且兼容ie、firefox、chrome 关于文件名：我司后端将文件名放在请求头headers里，需要代码获取 请求响应消息Response 控制台打印结果： 文件流 下载完成 实现代码： /** * 文件流下载 * data:接口返回文件流 * fileName:文件名 ...
a标签下载文件 ＜a＞ 标签的 download 属性,window.location.href下载文件 新窗口打开 打开页面
weixin_50885665的博客
11-10 3333
1、<a> 标签的 download 属性 下载文件 <a href="/images/myw3schoolimage.jpg" download="w3logo"> 2、js方法 window.location.href -- (页面可能会出现移动,最好用a标签) function openNewUrl(urlID){ window.location.href = href +"/message/exportWord?id="+urlID; }; .
A中的标签download属性，你知道吗？
CodingNoob
07-17 976
最近无意中发现A标签竟然有个download属性，于是就琢磨了下这个属性的用法，看了下文档。 才知道，如果给A标签href添加对应的图片或者文件地址，包括图片的base64地址都可以，然后在download属性设置对应的下载名称就可以下载图片了，这个属性可以作为直接点击下载图片，就不用用户再次点击右键保存了，还是有一定的用处。 ...
vue通过a标签下载文件
weixin_33414202的博客
04-29 353
axios.defaults.withCredentials = true; axios.get(url,{ params: { type: "csv", }, responseType: 'blob', }) .then((res)=>{ let fileName = this.meeting_name+ '——'+name+ ".xls"; ...
使用avue组件实现上传文件和下载文件的功能
weixin_51391923的博客
01-10 1398
文件上传和下载
vue 通过a标签下载文件 后怎么知道下载完成
07-12
在Vue中，通过a标签下载文件后，无法直接知道下载是否完成。因为a标签的下载行为是通过浏览器进行的，Vue无法直接获取到下载的状态或回调。 但是，你可以使用一些技巧来模拟下载完成的判断： 1. 使用一个计时器来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值