web前端以文件流的形式导出Excel文件

一般 web 前端处理导出文件有两种方法：

1、服务端返回完整 URL，直接打开 URL 即可；2、服务端返回数据流，前端解析数据流完成导出功能；

今天主要分享下第二种方式，直接上代码（兼容 ie10 以上）：

// url 为服务端返回的流数据
const exportParams = (url) => {const aLink = document.createElement('a');
    const blob = new Blob([url],{type: "application/vnd.ms-excel"});
    // 创建一个当前文件的内存 URL
    const _href = URL.createObjectURL(blob);
    aLink.style.display = 'none';
    aLink.href = _href;
    document.body.appendChild(aLink);
    aLink.setAttribute('download', '用户数据.xlsx');
    aLink.click();
    document.body.removeChild(aLink);
    // 手动释放创建的 URL 对象所占内存
    URL.revokeObjectURL(_href);
}

其实现原理就是先把服务端返回的数据流通过 URL.createObjectURL() 方法转成一个 URL，这个 URL 是存放在内存中的，URL 的生命周期是和创建的它的 document 绑定，也就是说在 document unload 的时候也会得到内存释放；然后通过设置 <a></a> 的download属性值，从而实现导出功能，最后再手动释放下创建的 URL 对象的内存。