通过模拟form表单实现post方法批量下载文件

news/2024/7/24 2:22:01 标签: 前端, vue, javascript

以下是在vue项目中,通过模拟原生form表单实现批量下载

    绑定点击事件
    <el-button @click="mulDownload()">批量下载</el-button>
    在data里定义下载接口地址
    urlActionMulDownload: window.SITE_CONFIG['baseUrl'] + '/unionFile/downloadZip',
  给postUrl方法传入下载接口地址和需要下载的多个文件的id组成的数组ids
 //批量导出
   mulDownload() {
      this.postUrl(this.urlActionMulDownload, {"fileIds": JSON.stringify(this.ids)})
   },
   postUrl(url, params) {
        var temp_form = document.createElement("form");
        temp_form.action = url;
        temp_form.target = "_self";
        temp_form.method = "post";
        temp_form.style.display = "none";
        for (var x in params) {
          var opt = document.createElement("input")
          opt.name = x;
          opt.value = params[x];
          temp_form.appendChild(opt)
        }
        document.body.appendChild(temp_form);

        temp_form.submit()
      },
   模拟创建一个form表单,设置表单action为下载接口地址,定义target属性规定在何处打开链接文档,方法为post,表单通过display:none隐藏。
   然后通过for循环ids,创建input输入框,将ids中的每个id分别赋值到input中的value,并将所有input框添加到form表单中。
   最后通过原生submit方法提交,实现批量下载

http://www.niftyadmin.cn/n/1514564.html

相关文章

DTO的理解以及spring遇到的一个问题注解方式对象为空

之前不明白有些框架中为什么要专门定义DTO来绑定表现层中的数据&#xff0c;为什么不能直接用实体模型呢&#xff0c;有了DTO同时还要维护DTO与Model之间的映射关系&#xff0c;多麻烦。然后看了这篇文章中的讨论部分才恍然大悟。摘两个比较有意义的段落。表现层与应用层之间是…

java switch嵌套_if 里嵌套case(用到switch)

//账户密码登录&#xff0c;成功或者失败&#xff0c;成功进入后循环打印图形&#xff0c;不需要打印再退出package homework1116;//账户密码登录&#xff0c;成功或者失败&#xff0c;成功进入后循环打印图形&#xff0c;不需要打印再退出import java.util.Scanner;public cla…

javascript实现倒计时功能

如图所示&#xff0c;在span标签里通过count显示数据&#xff0c;实现倒计时功能&#xff0c;倒计时结束&#xff0c;span标签隐藏<span v-show"!showButton">{{count}}s</span><el-button click"downTime()">点击倒计时</el-button&…

dubbo 教程

目录(?)[-] Dubbo是什么Dubbo能做什么dubbo的架构 节点角色说明调用关系说明服务提供者在启动时向注册中心注册自己提供的服务服务消费者在启动时向注册中心订阅自己所需的服务注册中心返回服务提供者地址列表给消费者如果有变更注册中心将基于长连接推送变更数据给消费者服务…

docker停止信号java_Docker stop或者Docker kill为何不能停止容器

作者&#xff1a;marshalzxy原文&#xff1a;https://www.jianshu.com/p/813d8362d497背景我们内部压力(cpu 80%&#xff0c;内存90%)通过stress (做页面压力测试)在容器内部做测试中&#xff0c;发现某几个时候通过docker stop $containeriddocker cli退出后&#xff0c;短暂时…

vue源码简单剖析(1)---object如何实现变化侦测

vue最大的特点之一就是数据驱动视图&#xff0c;也就是数据的变化&#xff0c;引起视图的变化。那么&#xff0c;第一步肯定要知道数据什么时候发生变化&#xff0c;这就叫做对数据的变化侦测 想要知道数据什么时候发生变化&#xff0c;我们可以使用js的Object.defineProperty方…

An internal error occurred during: Importing Maven projects. 错误

An internal error occurred during: "Importing Maven projects". 错误 An internal error occurred during: "Importing Maven projects". Unsupported IClasspathEntry kind4 今天用eclipse把非maven项目转换为maven项目后&#xff0c;爆出如上错误。 …

java私有 公开 保护_我们可以在Java中声明私有,受保护,公共或默认的抽象方法吗?...

没有主体的方法称为抽象方法。它仅包含带有半冒号和前面的抽象关键字的方法签名。public abstract myMethod();要使用抽象方法&#xff0c;您需要通过扩展其类并为其提供实现来继承它。声明一个私有抽象方法如果类的方法是私有的&#xff0c;则不能从当前类之外访问它&#xff…