脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → iframe下载多个文件

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下载多个文件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 微信小程序自定义导航栏（模板化）

    微信小程序自定义导航栏（模板化）

    这篇文章主要为大家详细介绍了微信小程序自定义导航栏（模板化），文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • js includes方法的使用小结

    js includes方法的使用小结

    JavaScript中的数组includes()方法用于判断数组中是否包含指定的元素,并返回一个布尔值,这篇文章主要介绍了js includes方法的使用,需要的朋友可以参考下
    2024-01-01
  • HTML长文本截取含有HTML代码同样适用的两种方法

    HTML长文本截取含有HTML代码同样适用的两种方法

    正如标题所言我们可以使用CSS截断字符串：IE,FireFox，Opera ，Safari都兼容也可以使用js截取，具体实现如下，希望对大家有所帮助
    2013-07-07
  • js实现股票实时刷新数据案例

    js实现股票实时刷新数据案例

    下面小编就为大家带来一篇js实现股票实时刷新数据案例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • javascript中Date对象的getDay方法使用指南

    javascript中Date对象的getDay方法使用指南

    这篇文章主要介绍了javascript中Date对象的getDay方法使用以及各种优化方案，非常不错的文章，这里推荐给大家。
    2014-12-12
  • JS打开图片另存为对话框实现代码

    JS打开图片另存为对话框实现代码

    使用JS打开图片另存为对话框一直都是网页应用中不可缺少的一部分，本人有些好奇，于是搜集整理了一些实现代码，不知道符不符合大众的口味，在此班门弄斧了，需要的朋友可以了解下
    2012-12-12
  • JS鼠标滑过图片时切换图片实现思路

    JS鼠标滑过图片时切换图片实现思路

    在浏览网页时会看到这样的效果：当鼠标滑过一张图片后，这张图片切换为了另外的一张图片，下面为大家介绍下具体是如何实现的，感兴趣的朋友不要错过
    2013-09-09
  • js实现AI五子棋人机大战

    js实现AI五子棋人机大战

    这篇文章主要为大家详细介绍了js实现AI五子棋人机大战，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12
  • JS字符串截取函数实例

    JS字符串截取函数实例

    这篇文章主要介绍了JS字符串截取函数实例，有需要的朋友可以参考一下
    2013-12-12
  • 最通俗易懂的javascript变量提升详解

    最通俗易懂的javascript变量提升详解

    下面小编就为大家带来一篇最通俗易懂的javascript变量提升详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论