纯前端倒出excel,大数据导出

需求

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

尝试过的方案

方案一、excle.js

复制代码
优点:不会有什么兼容性问题
缺点:3000*200以内的数据没有问题;超过就会出现性能问题,性能差的电脑就会出现浏览器崩溃
性能原因:形成xlsx文件的写入方法问题,需要使用 拆分循环 修改形成文件源码,跪求大佬修改一下给小弟学习。

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

复制代码
优点:不会有什么兼容性问题
缺点:
1、文件会比正常的文件会大3倍左右,每一个单元格大概多了32个字符串,
2、跟方案一一样都会出现性能问题
性能原因:形成xlsx文件的写入方法问题,需要使用 拆分循环 修改形成文件源码,跪求大佬修改一下给小弟学习。

方案三、原生table导出

复制代码
优点:速度非常快,10w*200列的数据,1分钟内导出。使用 拆分循 环封装一下封装数据大渲染模式,就可以解决性能问题。
缺点:
1、office2007以上打开会有告警,但是数据内容是正常的
2、苹果手机 微信打开 文件空白
3、下载的文件,本地编辑插入不了图片

最终方案

使用方案三,客户可以接受其的三个兼容性问题

关键点代码

shell 复制代码
#### 陈年老项目,不能写ES6,那就将就的使用吧
ini 复制代码
// 数据触发拆分
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) {
		// 组装数据完后的操作
    }
}
相关推荐
郭老二5 小时前
【前端】vue3:编译步骤
前端
不在逃避q6 小时前
Trae/Vs Code/Cursor命令行无法跑npm命令
前端·arcgis·npm
夏殇之殁6 小时前
包中创建自定义列表项。 . 使用自定义列表项进行数据绑定 . 将天气预报数据保存到本地内存表,通过LiveBindings进行显示。 ...
服务器·前端·javascript
The Chosen One9856 小时前
高进度算法模板速记(待完善)
java·前端·算法
陈随易6 小时前
MoonBit抓包模块pcap,查看电脑的每一次联网通信
前端·后端·程序员
新中地GIS开发老师7 小时前
WebGIS开发学生作品|低空航天管理与航线规划系统
前端·javascript·webgis·三维gis开发
用户059540174468 小时前
大模型对话记忆持久化踩坑实录:用 Playwright 自动化测了 300 次,终于揪出会话丢失的真凶
前端·css
丙氨酸長鏈8 小时前
Web前端入门第 问:JavaScript 一个简单的 IndexedDB 数据库入门示例
前端·javascript·数据库
kyriewen9 小时前
面试官让我手写虚拟列表——AI生成的版本,快速滚动几下就白屏了
前端·javascript·面试
IT_陈寒9 小时前
Vite热更新失效?你可能漏了这个配置
前端·人工智能·后端