.net使用Blob导出数据为Excel，纯前端操作

最新推荐文章于 2024-01-29 08:25:52 发布

Boogaloo-Jer

最新推荐文章于 2024-01-29 08:25:52 发布

阅读量645

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/gaiyi09/article/details/106143547

版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种前端实现的大数据量导出功能，通过将数据转换为表格格式并下载为Excel文件，适用于成千上百条数据的快速导出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间做了一个纯前端导出数据的功能，发现挺好用的，上万的数据量暂未测试，成千上百条的还是很快的，记录一下测试代码：

//可以命名文件的导出方法
function getAllData(dataArray) {
    if (dataArray == null || dataArray.length == 0) {
        toastr.warning("暫無數據可導出");
        return;
    }

    var lHtml = '<table border="1"><tr style="font-size:16px;font-weight:bold;"><th>ID</th><th>测试字段1</th><th>测试字段2</th></tr>';
    //循环遍历，每行加入tr标签，每个单元格加td标签
    for (let i = 0; i < dataArray.length; i++) {
        lHtml += '<tr>';
        for (let item in dataArray[i]) {
           lHtml += '<td>' + dataArray[i][item] + '\t</td>';//增加\t为了不让表格显示科学计数法或者其他格式
        }
        lHtml += '</tr>';
    }
    lHtml += '</table>';
    var tableHtml = '<html><head><meta charset="UTF-8"></head><body>';
    tableHtml += lHtml;
    tableHtml += '</body></html>';
    var excelBlob = new Blob([tableHtml], { type: 'application/vnd.ms-excel' });
    var date = getNowFormatDate();
    var fileName = "TEST" + date + ".xls";
    if (isIE()) {
        window.navigator.msSaveOrOpenBlob(excelBlob, fileName);
    } else {
        // 創建一个a标签
        var oA = document.createElement('a');
        // 利用URL.createObjectURL()方法为a元素生成blob URL
        oA.href = URL.createObjectURL(excelBlob);
        // 给文件命名
        oA.download = "TEST" + date;
        // 模拟点击
        oA.click();
    }
}