vue中实现附件下载

已于 2024-03-05 16:13:17 修改
阅读量2.6k 收藏 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的附件下载与错误提示、blob与json数据转换
qq_43548684的博客
04-07 2694
1、点击【下载Excel】按钮调后端接口； 2、接口成功：下载该excel文件（后端返回blob文件流）； 3、接口失败，提示错误信息（后端返回json数据）。
vue3使用下载附件功能
qq_46617584的博客
07-18 876
点击即可以下载打开。
vue的附件下载与错误提示、blob与json数据转换
最新发布
weixin_56242672的博客
05-29 267
vue附件下载的处理以及错误提示。1、请求api设置响应方式一定要设置为responseType: blob。原因：不设置为blob响应方式，导致后端返回成功接口的文件流blob数据，我们接收为json格式，浏览器能正常下载，但是excel或者wps打不开该文件，因为下载下来的文件格式不对。
vue实现文件下载的2种方式
weixin_52268321的博客
05-02 8351
iframe、a标签下载文件都是调用浏览器默认下载行为iframe闭合标签，会创建包含另个文档的内联框架，通过iframe实现文件（附件）的下载，隐藏iframe，当点击事件触发的时候，动态设置src就能实现文件下载功能。
Vue附件下载方法
wdw123156的博客
06-28 887
【代码】Vue附件下载方法。
vue项目中如何实现附件下载？
qq_62861688的博客
11-14 1881
实现附件下载效果。
Vue中下载不同文件的几种方式
热门推荐
前端程序猿的博客
08-07 2万+
当在Vue中需要实现文件下载功能时，我们可以有多种方式来完成。下面将介绍五种常用的方法。
vue 实现文件上传、下载
niuniu2878499107的博客
07-27 3234
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 1080
前端如何下载public文件夹下的静态资源文件，js+vue
Vue如何下载public中的pdf文件
LoveZJC96的博客
01-31 720
现在 vue.config.js中配置。在使用页面通过a标签下载。
vue3点击下载图片，以及文件流的下载
weixin_70243424的博客
05-28 2981
【代码】vue3点击下载图片，以及文件流的下载。
vue 下载public目录的公共文件提示“网站无法提取文件”或者下载下来文件打开是空白
qq_41643226的博客
03-23 799
vue 前端项目，通过a标签下载文件，如果vue.config.js中配置了publicPath，需要在下载的文件地址前面加上配置的路径前缀。
vue项目下载public目录下的文件
九段刀客的博客
02-09 2316
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.
vue 实现点击下载文件
HouMengFei_的博客
09-01 6652
vue实现点击下载文件或文档 1.代码如下 //导出事件 Export() { let link = document.createElement("a"); //创建一个a标签 link.style.display = "none"; //将a标签隐藏 link.href = safe + "/work/plan/exportJobPlanExcel"; //给a标签添加下载链接 "域名+接口" safe是一
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、付费专栏及课程。

余额充值