iframe一次下载多个文件实例

时间:2023-02-03 念念不忘人气:0

背景

在项目开发中，点击【导出】按钮需要下载两个 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';

加载全部内容