zoukankan      html  css  js  c++  java
  • 一次下载多个文件的解决思路-JS

    原文链接:点我

    真实经历

    最近开发项目需要做文件下载,想想挺简单的,之前也做过,后台提供下载接口,前端使用window.location.href就行了呗。不过开发的时候发现,有些文件有附属文件,点击 下载按钮 需要下载两个文件,而且不能使用压缩包的形式。想想不是也挺简单,点击 下载 发送两个下载请求不就搞定了么。

    说干就干,三下五除二就写好了,当点击 下载 的那一刻懵逼了, 第一个请求竟然自动Cancelled了,顿时一万个草泥马崩腾而过(因为是国外服务器,下载比较慢导致第一个请求被Cancelled),这就意味着快速点击不同的 下载 按钮也会有同样的问题,这不行啊,然后开始了自己的下载探索之旅。


    a标签 & location.href

    我们知道a标签及href指向的如果是一个下载链接,那么相当于下载文件,对于单文件下载还是ok的,不过快速点击几个下载按钮,有的下载会被Cancelled,这可不行,继续百度。

    上一段代码:

    const download = (url)=>{
       window.location.href = url;
    }

    window.open

    我们知道window.open可以打开一个新窗口,那么是不是可以实现下载呢,激动的我赶紧试了试,下载的确可以,不过会快速打开一个新窗口并且关闭,体验非常不好,果断放弃了。


    iframe

    突然想到iframe也可以向服务器发请求的,激动的我又赶紧试了试,哇塞,果然可以下载,而且没有违和感,代码贴出来。

    export const downloadFile = (url) => {
      const iframe = document.createElement("iframe");
      iframe.style.display = "none"; // 防止影响页面
      iframe.style.height = 0; // 防止影响页面
      iframe.src = url; 
      document.body.appendChild(iframe); // 这一行必须,iframe挂在到dom树上才会发请求
      // 5分钟之后删除(onload方法对于下载链接不起作用,就先抠脚一下吧)
      setTimeout(()=>{
        iframe.remove();
      }, 5 * 60 * 1000);
    }

    ps: iframe不会相互影响,可以连续下载哦!


    其他方案

    当然还有一些其他方式,Form下载、二进制流下载等,有空的小伙伴自行研究吧!

    作者:时来运转
    大佬们好,我是Web前端菜鸟,初来乍到,想跟诸位共同学习成长;
    综上是我每日闲时整理笔记,文章如有侵权请诸位及时告知我,谢谢关照!

  • 相关阅读:
    通过 AWS CLI 操作 AWS S3
    AWS S3文件存储服务器搭建(新)
    Vertx 接入MongoDB (九)
    Vertx 接入Redis (八)
    Vertx Mysql数据库优化 (七)
    Vertx 接入Mysql数据库 (六)
    Vertx 实现webapi实战项目(五)
    Vertx 实现webapi实战项目(四)
    Vertx 实现webapi实战项目(三)
    正则表达式:元字符(基本可用来匹配的字符)
  • 原文地址:https://www.cnblogs.com/myfate/p/14805408.html
Copyright © 2011-2022 走看看