前端导入Excel文件并解析实例

 

js代码

var wb; //读取完成的数据
var rABS = true; //是否将文件读取为二进制字符串

function importf(obj) { //导入
    $(".table_tbody").html("");
    if (!obj.files) {
        alert("您的文件格式不正确，请重新选择！");
        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'
            });
        }
        //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
        //wb.Sheets[Sheet名]获取第一个Sheet的数据
        var data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        console.log(data);
        $.each(data, function (index, item) {
            console.log(item);
            /*你的代码*/
            /*var fragment = '<tr>' +
                '<td></td>' +
                '<td>' + item.姓名 + '</td>' +
                '<td>' + item.身份证号 + '</td>' +
                '<td>' + item.单位部门 + '</td>' +
                '<td>' + item.性别 + '</td>' +
                '<td>' + item.手机号 + '</td>' +
                '<td>' + item.电子邮箱 + '</td>' +
                '<td>' + item.qq + '</td>' +
                '<td>' + item.地址 + '</td>' +
                '<td>' + item.证件类型 + '</td>' +
                '<td>' + item.证件号码 + '</td>' +
                '<td>' + item.有效起始日期 + '</td>' +
                '<td>' + item.有效结束日期 + '</td>' +

                '</tr>';*/
            $(".table_tbody").append(fragment);
        });
        var len = $('.table_tbody tr').length;
        for (var i = 0; i < len; i++) {
            $('.table_tbody tr:eq(' + i + ') td:first').text((i + 1));
        }
    };
    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;
};

html代码

<input type="file"  onchange="importf(this)" name="name" value="" />

 

总结：1.此代码实现纯前端解析导入excel文件。

           2.用这种纯前端的方法在项目中导入并解析excel文件有2个问题

            问题1，这种导入excel的方式需要依赖excel表格软件，在pc未安装excel时不可用。

            问题2，解析文件数据过大时，会导致前端页面卡顿，造成不好的体验感。

以上是对这个功能的总结，该如何使用，仁者见仁智者见智。