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下载多个文件的资料请关注脚本之家其它相关文章！
相关文章
本文为大家介绍下使用js对输入框进行限制：文本框只能输入数字代码、只能输入数字、只能输入字母和汉字、只能输入英文字母和数字等等，还有很多，感兴趣的可以学习下2013-07-07
数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其中的10种，面试官很有可能对你刮目相看2019-12-12
这篇文章主要为大家介绍了tsc性能优化Project References使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
点击按钮怎么跳转到另外一个页面呢？点击图片要跳转到新的页面时，怎么做到呢？可以使用onclick=window.location=新页面来实现2014-10-10
这篇文章主要介绍了JavaScript动态添加数据到表单并提交,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-06-06
JS.elementGetStyle(element, style)应用示例
获取Dom元素的Style数组中的指定Style元素，下面有个不错的示例，感兴趣的朋友可以参考下，希望对大家有所帮助2013-09-09
微信小程序非常火爆，今天脚本之家小编给大家带来的微信小程序自定义tab实现多层tab嵌套功能以及项目中遇到的问题及解决方法，感兴趣的朋友一起看看吧2018-06-06
这篇文章主要为大家详细介绍了原生JS写一个环形的鼠标滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要为大家详细介绍了微信小程序实现简单计算器与秒表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要为大家详细介绍了javascript中利用柯里化函数实现bind方法，感兴趣的小伙伴们可以参考一下2016-04-04
最新评论