即将回家过年，一个“批量下载”需求，差点翻了车！

viktor

发布于 2022-08-04 11:08:42

2630

发布于 2022-08-04 11:08:42

文章被收录于专栏：程序员自习室

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

需求是这样的：点击一个下载按钮，批量下载多份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
    }) 
}

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

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

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

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

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

事情没有这么简单，推翻方案，重来！

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

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

嗯嗯，说干就干，然后有了下面的代码：

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！