vue中实现附件下载

已于 2024-03-05 16:13:17 修改
阅读量2.7k 收藏 4
点赞数 2
分类专栏： 前端 文章标签： 前端 vue
于 2022-10-02 20:07:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64511052/article/details/127145671
版权

最近自己写网站练手遇到，一个难题，就是如何在前端界面中点击实现附件的下载，试了网上的很多方法，都报错（可能是我太菜了，没有理解那些大佬的意思），然后自己琢磨了好久，发现a标签的download属性可以实现，这个功能··········

实现步骤：

1.在自己的vue组件需要添加下载功能的位置写入a标签

<a href="web学习方案2.doc" download="web学习方案2.doc" target="_blank">附件1：web学习方案</a>

我这里href的属性值是存放在public文件夹下面需要在网页中被别人下载的文件名称，（即文件路径，public文件夹中的文件引用写路径public不写）

download属性值是所需要下载文件的名称

target是指规定在何处打开链接文档。

其属性值有：（可以根据需要选择）

值描述
_blank在新窗口中打开被链接文档。
_self默认。在相同的框架中打开被链接文档。
_parent在父框架集中打开被链接文档。
_top在整个窗口中打开被链接文档。
framename在指定的框架中打开被链接文档。

然后对a标签进行简单的样式设置（不是必须，不添加样式，也可以），就可以实现了

小豆子是个蛋蛋呀
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue附件下载
weixin_40496191的博客
05-21 1283
a标签下载 <a :href="地址" :download="file.name" :underline="false" target="_blank"> {{ file.name }} </a> /** * 根据主键获得commonAttachment. */ @ApiOperation(value = "下载附件", notes = "") @RequestMapping(path = "/uploadById", method ..
知识：vue的附件下载与错误提示、blob与json数据转换
qq_43548684的博客
04-07 2707
1、点击【下载Excel】按钮调后端接口； 2、接口成功：下载该excel文件（后端返回blob文件流）； 3、接口失败，提示错误信息（后端返回json数据）。
知识：vue的附件下载与错误提示、blob与json数据转换_vue-office报错doenload(2)
最新发布
2401_84411018的博客
05-10 246
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】JavaScript性能linux。
vue3使用下载附件功能
qq_46617584的博客
07-18 881
点击即可以下载打开。
vue实现文件下载的2种方式
weixin_52268321的博客
05-02 8354
iframe、a标签下载文件都是调用浏览器默认下载行为iframe闭合标签，会创建包含另个文档的内联框架，通过iframe实现文件（附件）的下载，隐藏iframe，当点击事件触发的时候，动态设置src就能实现文件下载功能。
Vue附件下载方法
wdw123156的博客
06-28 892
【代码】Vue附件下载方法。
vue项目中如何实现附件下载？
qq_62861688的博客
11-14 1881
实现附件下载效果。
Vue中下载不同文件的几种方式
热门推荐
前端程序猿的博客
08-07 2万+
当在Vue中需要实现文件下载功能时，我们可以有多种方式来完成。下面将介绍五种常用的方法。
vue 实现文件上传、下载
niuniu2878499107的博客
07-27 3237
vue 实现文件的上传和下载
vue从后端下载附件
ccjiushiwoo的博客
09-19 196
vue从后端下载附件
在VUE中实现文件下载并判断状态的方法
10-16
在Vue.js框架中，实现文件下载并判断下载状态是常见的需求，特别是在处理用户交互和数据传输时。本篇文章将详细介绍如何在Vue项目中实现这一功能，并通过Axios库来管理HTTP请求。 首先，我们需要引入Axios库，它是...
vue实现点击按钮下载文件功能
10-16
主要介绍了vue中点击按钮下载文件，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
springboot整合vue实现上传下载文件
08-25
在SpringBoot中，文件下载可以使用HttpServletResponse来实现。下面是一个简单的文件下载示例： ```java @RequestMapping("/download") public void downloadFile(@RequestParam("fileName") String fileName, ...
springboot+vue实现文件上传下载
01-18
本文实例为大家分享了springboot+vue实现文件上传下载的具体代码，供大家参考，具体内容如下 一、文件上传（基于axios的简单上传） 所使用的技术：axios、springboot、vue; 实现思路：通过h5 ：input元素标签进行...
【vue】js下载public静态文件
m0_65041204的博客
02-28 1087
前端如何下载public文件夹下的静态资源文件，js+vue
Vue如何下载public中的pdf文件
LoveZJC96的博客
01-31 721
现在 vue.config.js中配置。在使用页面通过a标签下载。
vue3点击下载图片，以及文件流的下载
weixin_70243424的博客
05-28 2984
【代码】vue3点击下载图片，以及文件流的下载。
vue 下载public目录的公共文件提示“网站无法提取文件”或者下载下来文件打开是空白
qq_41643226的博客
03-23 807
vue 前端项目，通过a标签下载文件，如果vue.config.js中配置了publicPath，需要在下载的文件地址前面加上配置的路径前缀。
vue项目下载public目录下的文件
九段刀客的博客
02-09 2317
click_down_excel() { let dom = document.createElement("a"); dom.href = "/static/importExcel/material.xlsx"; dom.download = "material.xlsx"; document.body.appendChild(dom); // 点击下载 dom.click(); document.body.remove.
vue2 实现文件下载
12-01
以下是Vue2实现文件下载的示例代码： ```html <template> <div> <button @click="downloadFile">下载文件</button> </div> </template> <script> export default { methods: { downloadFile() { const url = 'http://example.com/file.pdf'; // 文件的URL地址 const link = document.createElement('a'); link.href = url; link.download = 'file.pdf'; // 下载后文件名 link.click(); } } } </script> ``` 在上述代码中，我们通过创建一个`<a>`标签来实现文件下载。我们将文件的URL地址赋值给`href`属性，将下载后的文件名赋值给`download`属性，然后通过调用`click()`方法来触发下载。 需要注意的是，如果文件是跨域的，我们需要在服务器端设置CORS（跨域资源共享）策略，否则浏览器会阻止下载。具体的CORS设置可以参考引用中的文章。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值