首页 > 其他分享 >通过动态创建a标签,循环批量下载文件所遇到的问题记录

通过动态创建a标签,循环批量下载文件所遇到的问题记录

时间:2023-08-29 19:11:30浏览次数:40  
标签:eleIF 批量 标签 动态创建 解决 document 下载

1. 现象: 直接for循环动态创建a标签后,进行click事件触发下载时,你会发现浏览器只下载了最后一个文件

  原因:浏览器下载时,太快的话,会取消上次的下载

 解决方法一:可添加settimeout定时器,进行一定时间延迟,比如300毫秒,把下载触发的事件放到定时器中即可。

2. 解决方法二

  通过iframe解决

  

downloadFile(url) {
            try {
                let eleIF = document.createElement('iframe');
                eleIF.src = url;
                eleIF.style.display = 'none';
                document.body.appendChild(eleIF);
                //防止下载2次
                setTimeout(function () {
                    document.body.removeChild(eleIF)
                }, 1000);
            } catch(e) {
                console.log(e);
            }
        }
    }

3. 解决方法三:

  通过多次请求,并且请求的返回类型为 blob ,对流进行转换,然后动态创建a标签解决

标签:eleIF,批量,标签,动态创建,解决,document,下载
From: https://www.cnblogs.com/zeosky-zhe/p/17665657.html

相关文章

  • WPF Textblock标签下 Run标签-----显示空白或者消除空白
    消除Run之前的空白是将Run标签布局时头尾相连,如下:<TextBlock><RunText="A"></Run><RunText="B"></Run></TextBlock> 消除Run之间连接的空白格式,方式如下:<TextBlock><RunText="A&quo......
  • 微信开发之一键创建标签的技术实现
    简要描述:添加标签请求URL:http://域名地址/addContactLabel请求方式:POST请求头Headers:Content-Type:application/jsonAuthorization:login接口返回参数:参数名必选类型说明wId是String登录实例标识labelName是String标签名称请求参数示例{......
  • 国标GB28181安防监控视频平台EasyGBS新功能:批量绑定角色与取消设备
    国标GB28181协议视频平台EasyGBS是基于国标GB28181协议的视频云服务平台,支持多路设备同时接入,并对多平台、多终端分发出RTSP、RTMP、FLV、HLS、WebRTC等格式的视频流。国标视频监控平台可提供视频监控直播、云端录像、云存储、检索回放、智能告警、语音对讲、平台级联等功能,在视频......
  • Prometheus监控实战系列八:标签重写
    标签重写(Relabeling)是Prometheus一个非常有用的功能,它可以在任务拉取(scraping)阶段前,修改target和它的labels。该功能在日常的监控中常常会使用到,值得我们好好了解。 一. 默认标签 默认情况下,Prometheus加载targets后,都会包含一些默认的标签,其中以__作为前置的标签是在系......
  • 动态修改浏览器标签页图标
    //动态修改浏览器图标 getIcon(){//this.favicon是浏览器图标的地址或者路径 if(this.favicon){ letlink=document.querySelector("link[rel*='icon']")||document.createElement('link'); link.type='image/vnd.microsoft.icon......
  • 如何健壮地批量资源创建
    批量资源创建是一种典型的数据处理流程。这样的数据处理流程典型步骤是加载输入数据集遍历数据集,对每个条目,创建目标资源,目标资源可能是一种,也可能是嵌套的有层次结构的树状结构的一系列资源。这样的处理流程,如果不做任何错误处理,整个程序处于脆弱状态。应该考虑哪些问题呢?......
  • MySqlBulkCopy 批量新增数据
    MySqlConnector有个MySqlBulkCopy批量新增数据方法,不过只能用DataTable,需要把list转成DataTable代码如下:MySqlBulkCopymySqlBulkCopy=newMySqlBulkCopy(conn){DestinationTableName="userinfo"};mySqlBulkCopy.ColumnMappings.AddRange(table.Columns.Cast<DataC......
  • JSTL中forEach标签 varStatus属性值
    特性        Getter                     描述current   getCurrent()         当前这次迭代的(集合中的)项index      getIndex()              当前这次迭代从0开始的迭代索引count     getCount()......
  • 批量python爬虫采集性能优化之减少网络延迟的方法
    今天,我们将一起探讨批量爬虫采集的性能优化,特别关注减少网络延迟的方法。网络延迟是爬虫程序中一个常见的性能瓶颈,通过优化网络延迟,我们可以提高爬虫程序的采集速度和效率。让我们一起来看看如何实现这一目标。1.使用异步请求传统的同步请求方式会导致爬虫程序在等待服务器响应时浪......
  • dapper mysql 批量新增修改
    dapper是C#程序员比较喜欢用的轻量级ORM,简单易学,只是没有批量新增以及修改(收费版有),写了如下扩展///<summary>///dapperMySQL批量新增修改扩展///</summary>publicstaticclassDapperExtensions{///<summary>///批量插入......