iframe一次下载多个文件实例

更新时间：2023年01月11日 11:17:11 作者：念念不忘

这篇文章主要为大家介绍了iframe一次下载多个文件实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

背景

在项目开发中，点击【导出】按钮需要下载两个 excel 文件，之前下载文件都是使用的 window.location.href = '下载url' 就能实现下载功能，但是只能是单文件的下载，多文件的下载需要借助 iframe 来实现。

解决方案

使用 iframe 可以实现一个点击按钮下载多个文件，具体实现如下：

const urlArr = ['https://test.com/order_export_1663644115.csv', 'https://test.com/order_export_1663644223.csv']
function exportExcel(url) {
    const iframe = document.createElement('iframe');
    iframe.style = none; // 防止影响现有页面内容
    iframe.src = url;
    document.body.appendChild(iframe) // iframe 必须挂载到 dom 树才会发送请求
    iframe.onload = function () {
        document.body.removeAttribute(iframe) // 之后删除iframe
    }
}
urlArr.forEach((item) => {
    exportExcel(item)
})

当时使用的这个方案下载文件,服务端返回的文件地址的是阿里云的oss对象存储,然后下载MP4 或者 image 文件的时候一直打开预览,不会触发浏览器下载行为

解决方案是：可以设置文件的响应头或者,在请求url后面拼接

'?response-content-type=application/octet-stream';

以上就是iframe一次下载多个文件实例的详细内容，更多关于iframe下载多个文件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

以JavaScript来实现WordPress中的二级导航菜单的方法
这篇文章主要介绍了以JavaScript来实现WordPress中的二级导航菜单的方法,文中首先对WordPress基本的PHP导航菜单的做法给出了说明来作为基础,需要的朋友可以参考下
2015-12-12
原生js事件的添加和删除的封装
在IE浏览器中添加或删除事件用attachEvent、detachEvent，下面的对事件的添加和删除做了封装，感兴趣的朋友可以参考下
2014-07-07
详解Javascript获取缓存和清除缓存API
本篇文章主要介绍了详解Javascript获取缓存和清除缓存API，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
Js自动截取字符串长度,添加省略号(……)的实现方法
下面小编就为大家带来一篇Js自动截取字符串长度,添加省略号(……)的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
小程序如何构建骨架屏
最近在移动端上面看到不同于菊花图的加载方式，就是这篇文章需要分享的Skeleton Screen，中文称之为"骨架屏"，下面我们来简单了解一下吧
2019-05-05
RequireJS使用注意细节
RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。这篇文章主要介绍了RequireJS使用注意细节的相关资料,需要的朋友可以参考下
2016-05-05
前端实现打印功能的两种方法详解
当页面设计好后需要打印出来,如网页的的打印浏览和打印功能,有些公司需要让前端开发好页面打印出来或者转为pdf格式的文档,下面这篇文章主要给大家介绍了关于前端实现打印功能的两种方法,需要的朋友可以参考下
2023-01-01
IE中直接运行显示当前网页中的图片推荐
IE中直接运行显示当前网页中的图片推荐...
2006-08-08
JS实现百度网盘任意文件强制下载功能
这篇文章主要介绍了JS实现百度网盘任意文件强制下载 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-08-08
javascript动画浅析
最近一直在弄手机端的游戏，接触到各种动画。加之对之前的自己那个动画类不满意，就有心想写个新的。然后翻看各种博客，查资料。也学到一些新的东西
2012-08-08