纯前端导出excel大数据导出

最新推荐文章于 2024-08-14 11:01:49 发布

w20228396

最新推荐文章于 2024-08-14 11:01:49 发布

阅读量640

点赞数 6

文章标签： excel 前端

本文链接：https://blog.csdn.net/w20228396/article/details/136457734

版权

本文讨论了处理大量客户数据（每天2万+行*200列）时，前端使用excle.js、xlxs.js库和原生table进行导出的优缺点。excle.js和xlxs.js面临性能问题，而原生table则速度快但需后端协助。关键在于选择合适的数据量范围和导出策略。

摘要由CSDN通过智能技术生成

需求

需求：客户数据量特别大，每天都有2w条以上的数据。 1、导出10w行*200列以上的数据 2、需要带样式导出 3、支持office 2007以上打开

方案一、excle.js

优点：不会有什么兼容性问题

缺点：3000*200以内的数据没有问题；超过就会出现性能问题，性能差的电脑就会出现浏览器崩溃

方案二、xlxs.js + xlsx-js-style 、SheetJs等类似xlxs的js库

优点：不会有什么兼容性问题

缺点： 1、文件会比正常的文件会大3倍左右，每一个单元格大概多了32个字符串，

2、跟方案一一样都会出现性能问题。

方案三、原生table导出

优点：速度非常快，10w*200列的数据，1分钟内导出。使用拆分循环封装一下封装数据大渲染模式，就可以解决性能问题。

关键点代码

// 数据触发拆分
function setXlsxData(parms){ // arr 行   headerList列 
    var s = 1000
    var sum = Math.ceil(parms.arr.length/s)
    var newObj={}
    for(var i= 0;i<sum;i++){
        (function(j) {
            setTimeout(function(){
                var sIn = j*s
                var endI = sIn+s
                if(j==sum-1&& parms.arr.length<s*sum){
                    endI = parms.arr.length
                }
                var newArr = parms.arr.slice(sIn,endI)
                newObj[j] = toForXlsxData(newArr,parms.headerList)
                checkDataOver(sum,newObj,parms,j)
            },j*200,)
        })(i);
    }   
}

// 拆分循环处理数据的逻辑
function toForXlsxData(arr,headerList){ 
    var newArr =[]
    for(var i = 0;i<arr.length;i++){
        var _itemRow = [];
        for(var k=0;k<headerList.length;k++){
            // _itemRow 每一个单元格数据处理 样式 等 
        }
        newArr.push(_itemRow)
    }
    return newArr
}

// 检查数据是否组装完成
function checkDataOver(sum,newObj,parms,j){
	// 导出进度等处理
	var status = Math.round((j/sum)*100)
    var statusText = "已导出进度"+ status + "%"
    if (sum === Object.keys(newObj).length) {
		// 组装数据完后的操作
    }
}

总结：小批量数据、所需数据已全部在页面可直接纯前端导出excel；大批量或需要逻辑的数据通过后端导出。