近期在参与一个紧急项目,临近过年了,工期紧,产品设计也比较粗暴,其中遇到一个小问题,

需求是这样的:点击一个下载按钮,批量下载多份zip资料,举个🌰,点击按钮,后端返回一个下载地址 Url 的数组,然后,需要前端一次性触发下载。

我一想,这简单啊,遍历这个数组,然后模拟a链接,下载每个url即可啊,于是出现了以下代码:

// 下载函数
const download = (link: string)=> {
    const el = getLinkNodeElement()
    el.setAttribute('href', link)
    triggerClick(el)
}

// 创建 a 链接
const getLinkNodeElement = () => {
    const id = 'node-download'
    let el = document.getElementById(id)
    if (!el) {
      el = document.createElement('a')
      el.setAttribute('id', id)
      el.setAttribute('target', '_blank')
      el.setAttribute('rel', 'noopener')
      document.body.appendChild(el)
    }
    return el
}

// 模拟点击 a 链接
const triggerClick = (node: HTMLElement) => {
    try {
      if (document.createEvent) {
        const evt = document.createEvent('MouseEvents')
        evt.initEvent('click', true, false)
        node.dispatchEvent(evt)
      } else if ((document as any).createEventObject) {
        (node as any).fireEvent('onclick')
      }
    } catch (e) {
      node.click()
    } 
}

// 获取地址,遍历,批量下载
const downloadZip = async () => {
    await bookListVM.getZips()  // 获取zips 的下载地址
    bookListVM.zipUrlList.forEach((list) => {   
      download(list.url)   // 遍历下载每个url
    }) 
}

本想着大功告成收工,然后一经测试,傻了,每次都只成功下载一个,其他的被浏览器拦截了,

image-20210210103748831

因为下载地址和当前系统不是同域!!这是浏览器的安全机制。

如果需要继续下载就需要始终允许这个弹出式窗口显示,这不搞笑吗?客户才不会注意到这个地方呢!

即使注意到了,也不一定愿意允许这玩意啊,不安全怎么办!

而且这个下载,页面还有抖动,这方案算是废了。

image-20210210103916374

事情没有这么简单,推翻方案,重来!

简单思考一下,如何绕过浏览器的安全拦截呢?

答案是:先打开一个新的空白页,浏览器总不会拦截了把,然后再把页面设置为我们的下载地址

嗯嗯,说干就干,然后有了下面的代码:

const download = (url: string) => {
  const win = window.open()
  win.src = url
}
// 获取地址,遍历,批量下载
const downloadZip = async () => {
    await bookListVM.getZips()  // 获取zips 的下载地址
    bookListVM.zipUrlList.forEach((list) => {   
      download(list.url)   // 遍历下载每个url
    }) 
}

刚写完,就发现了问题,这不对呀,我要打开的不只一个页面哦,我是批量触发批量下载!我都跳出去到一个空白页面了,怎么继续打开其他空白页呢???

一阵懵圈,看来还是不行,看来问题不是那么简单啊!

不过,已经答应测试了,半小时搞定,这眼看着就剩十来分钟了,不能打脸啊。。。。

再想想,一定有办法的,突然想起,为什么下载就一定要a 链接了,这思路是个死胡同啊,还要什么可以出发下载呢?

然后我就想到了iframe, 它也可以携带url的呀,也不就可以下载了吗?那个不受我待见的标签,没想到今天可以救我一命。

然后就有了下面的代码:

const download = (url) => {
  var iframe = document.createElement('iframe') //  先创建一个iframe 标签
  iframe.style.display = 'none' // 不能在页面中被看到,把他隐藏起来,不影响我们使用啊
  iframe.style.height = '0px'  // 给他个0的高度,免得影响页面布局
  iframe.src = url  // 关联上我们的下载地址
  document.body.appendChild(iframe) // 把他绑定在body上才能发挥作用,不然就能孤魂野码了
  setTimeout(() => { 
    iframe.remove()    // 实在是无奈之举,iframe 没有onload事件,只能放在setTimeout里清除了,时间稍微大一点,免得zip包太大还没有下载完。
  }, 5000)
}

// 获取地址,遍历,批量下载
const downloadZip = async () => {
    await bookListVM.getZips()  // 获取zips 的下载地址
    bookListVM.zipUrlList.forEach((list) => {   
      download(list.url)   // 遍历下载每个url
    }) 
}

收工,搞定,时间还有一分钟,测试一下看看效果,

点击下载,浏览器弹出提示,是否允许下载多个文件,(只会提示一次的),点击允许,成功下载,perfect!

image-20210210103249307

马上要回家过年了,幸好没有玩砸,不然就英明扫地了~

移测,回家过年。

Q.E.D.


一个热心肠的正经前端程序猿~