jsxlsx 前端处理excel的导入

git hub 完整源码看这里

最近做了好几个和excel相关的项目,大部分是用phpexcel处理的,因为首先想到的也是用后端语言处理这些肯定更给力点。但是后端导出excel的时候,数据量大起来会很慢。我测试了下我们那个表,用phpexcel导出,12000条的时候需要花掉40秒左右,然而php.ini默认都是最长30s就要中断了。还得改配置,还得等很长时间。

papaparse 和 jsxlsx

但是前后端分离开发一个项目的时候,由于前端需要excel的导入导出,接触了两个插件,一个是papaparse,相关介绍见 papaparse.

另一个是jsxlsx。因为papaparse虽然体积小,但是只能搞csv格式。jsxlsx却没有这个限制。但是core版都要500k,体积确实大了点,但比其他的性能,还是值得拥有的撒。我用这个插件测试,20000条只用了3.5s。其实想想也好理解,这样不用跟后端频繁交互,消耗的是浏览器本身的性能,当然会快不少。

上代码:
$(function () {
    var oCk = true;
    $('#upload').click(function()
    {
        if(oCk){
            oCk = false;

            if (!$('#aaaa')[0].files.length) {
                commonFn.layerMsg('请选择数据文件');
                oCk = true;
            } else {
                var wb;//读取完成的数据
                var rABS = false; //是否将文件读取为二进制字符串
                var fileObj = document.getElementById('company-login-zhizhao');
                var resJson ;
                importf(fileObj);

                function importf(obj) {//导入
                    if(!obj.files) {
                        return;
                    }
                    var f = obj.files[0];
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        var data = e.target.result;
                        if(rABS) {
                            wb = XLSX.read(btoa(fixdata(data)), {//手动转化
                                type: 'base64'
                            });
                        } else {
                            wb = XLSX.read(data, {
                                type: 'binary'
                            });
                        }

                        resJson= XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) ;
                        resJsonLen = resJson.length;
                        var finalArr = [];
                        for(var i=0;i<resJson.length;i++){
                            var objs = {
                                partner_id:1,
                                external_orderid:resJson[i]['aaa'],
                            };
                            finalArr.push(objs)
                        }

                        $.ajax({
                            'url':'0000000000',            //验证登录信息
                            data:{param:finalArr},
                            type:'post',
                            dataType:"json",
                            success: function(data){
                                console.log(data)

                                setTimeout(function () {
                                    oCk = true;
                                },500)

                            },
                            error:function (err) {
                                commonFn.layerMsg('请求失败');
                                setTimeout(function () {
                                    oCk = true;
                                },500)

                                return false;
                            }
                        })
                    };
                    if(rABS) {
                        reader.readAsArrayBuffer(f);
                    } else {
                        reader.readAsBinaryString(f);
                    }
                }

                function fixdata(data) { //文件流转BinaryString
                    var o = "",
                        l = 0,
                        w = 10240;
                    for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
                    o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
                    return o;
                }
            }
        }
    })
})

随机浏览