近期在参与一个紧急项目，工期紧，产品设计也比较粗暴，其中遇到一个小问题，
需求是这样的：点击一个下载按钮，批量下载多份 zip 资料，举个🌰，点击按钮，后端返回一个下载地址 Url 的数组，然后，因为资料的属性问题，不允许将多份 zip 再次打包压缩，需要前端一次性触发下载
我一想，这简单啊，遍历这个数组，然后模拟 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！
幸好没有玩砸，不然就英明扫地了~
移测，收工下班。
评论