实现a标签下载附件功能

小鱼儿 2023-06-17 13:52 17阅读 0赞

## 实现上传的附件下载功能 ##

界面如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]  
示例：`<a href="https://img....." download="" title="下载" mce_href="#"><i class="fa fa-arrow-circle-down"></i></a>`

若a标签没有download属性就是跳转，有的话就为下载  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]  
根据后台传过来的附件名称，然后拼接上保存的路径。用a标签实现拼接下载，代码如下：

<a :href="item?xxfjUrl+item.split('-')[0]+'/'+item.split('-')[1]:[]" download="" style="color:#095AAE;margin-left: 10px;" v-for="(item,index) of scope.row.xxfj">附件{
       {index+1}}</a>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191129103907549.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191129104418416.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关实现a标签下载附件功能

实现上传的附件下载功能界面如下图所示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

小鱼儿/ 2023年06月17日 13:52/ 0 赞/ 18 阅读

相关 VUE 使用a标签 GET 通过文件流实现下载功能

vue Element UI 前端使用 a标签 get 通过文件流实现下载功能 1、定义

╰半夏微凉°/ 2023年06月07日 05:36/ 0 赞/ 34 阅读

相关 a标签实现下载本地文件的功能

<a :href="detail.ctaFile" target="_blank" v-if="detail.ctaFile">点击下载</a> target=“\_

系统管理员/ 2023年05月22日 06:57/ 0 赞/ 82 阅读

相关利用a标签下载图片

下载图片先看看效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

悠悠/ 2023年02月28日 06:08/ 0 赞/ 9 阅读

相关在Vue框架中通过a标签实现下载本地资源的功能

效果图： ![20200718094226806.gif][] vue-cli 2.x 在vue-cli 2.x中，需要将本地资源放在static文件夹下，

我不是女神ヾ/ 2023年02月27日 13:44/ 0 赞/ 18 阅读

相关 xwiki功能-附件

一个页面可以包含附件，然后在页面中引用。一个常用的实例，例如上传图像附件，在页面内容中显示。上传文件有3种方式上传文件：使用页面顶部菜单你可以通过"Mo

红太狼/ 2022年05月24日 01:58/ 0 赞/ 293 阅读

相关 A标签直接下载文件

<a href="http://文件链接" download="">下载</a> 有时候不加download属性也可以，那是因为一些浏览器的原因。为了兼容大部分浏览器

旧城等待，/ 2022年04月16日 03:23/ 0 赞/ 330 阅读

相关 VUE 使用a标签 POST 通过文件路径实现下载功能

vue Element UI 前端使用 a标签 post 通过文件路径实现下载功能

古城微笑少年丶/ 2021年11月26日 14:24/ 0 赞/ 1328 阅读

相关 vue+iview 通过a标签实现文件下载

vue+iview 通过a标签实现文件下载方法一：注意: 如果下载的文件放在本地目录下，一定要将模板文件放到 public 目录下，否则由于权限问题找不到文件路

Dear 丶/ 2021年11月09日 09:54/ 0 赞/ 417 阅读

相关如何使用a标签下载文件

转自：http://blog.csdn.net/A\_one2010/article/details/69943953 仅用于学习 a标签 a标签是前端页面

阳光穿透心脏的1/2处/ 2021年09月14日 15:18/ 0 赞/ 2297 阅读