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

╰半夏微凉° 2023-06-07 05:36 32阅读 0赞

# vue Element UI 前端使用 #

#                                      a标签 get 通过文件流 实现下载功能 #

1、定义按钮

<el-button @click="downloadSelection" >下载选中职员信息</el-button>

2、实现a标签下载 函数

//下载选中的职员信息
        downloadSelection(){
    
          if(this.selectionEmployee.length>0){
            let a = document.createElement("a");
            a.href =`${BaseUrl}/downloadFiles/downloadEmployeeInfoExport?employeeIds=`+this.selectionEmployee;
            document.body.appendChild(a);
            a.click();  //下载
            URL.revokeObjectURL(a.href);    // 释放URL 对象 
            document.body.removeChild(a);   // 删除 a 标签
          }else{
             this.$message({message: '请选择要下载的职员',type: 'info'});
          }
        },

3、页面实现

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70]: /images/20230601/1339852793724e7e90e55263c4a797ac.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 vue项目中使用a标签下载视频文件

vue项目中使用a标签下载视频文件前提条件： 1、地址为http 2、文件格式为MP4（仅代表这次项目中使用的情况）示例代码： <el-butt

桃扇骨/ 2023年01月03日 04:53/ 0 赞/ 144 阅读

相关 jsp + servlet 通过a 标签下载文件

` 在开发项目时遇到，在jsp 中通过 a 标签的方式，访问后台servlet，调用客户端以下载的方式打开文件，遇到中文文件名乱码，找不到问题，导致下载失败问题，

末蓝、/ 2022年07月12日 03:58/ 0 赞/ 400 阅读

相关通过a标签打开/下载文件

<a target="_blank" href="./Public/download-file/qddl.xls" download=""></a>

以你之姓@/ 2021年11月27日 01:38/ 0 赞/ 816 阅读

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

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

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

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

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

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

相关 Java VUE 使用文件流实现下载功能

1、后端：controller控制器 / 导出 --->资产信息 @return @throws IO

喜欢ヅ旅行/ 2021年09月30日 04:50/ 0 赞/ 579 阅读