标签xlsx.js

xlsx.js学习

最近遇到个问题,为了让用户能够快速的上传数据,需要在开发的系统当中使用上传excel文件,一开始很是头疼,各种查资料都是搞不懂是个什么玩意,到底怎么实现也不清楚,经过认真研究后,终于找到了解决的办法,那就是使用了前端xlsx.js这个库。
开始做的时候,根据自己的理解,要进行excel数据的导入操作,那必须先进行文件的上传,然后在进行文件的读取,并把excel文件里面的数据解析出来。可看了xlsx.js的示例,发现它并没有进行上传的操作,而是直接就把文件解析出来了,且可以解析成原生excel格式、json格式还有其他类型格式,我主要用json格式来进行传输,所以主要研究了json格式。
具体实现如下:
1、前端页面中引用xlsx.js文件,xlsx.js文件下载
2、html中添加input标签,这里有两种方式,如果要用直接的选择文件空间,可以直接使用
的形式来进行操作,如果要用其它的按钮或者空间,可以把file空间设置为隐藏,,然后在通过js调用,触发此file控件的click事件即可。
3、监听file空间的change事件,并进行文件读取及解析
这里还用到的是HTML5中的FileReader()方法,此方法具体内容可自行进行百度。
实现的具体代码如下:

var X = XLSX;
var xl = document.getElementById('xlf');
if(xl.addEventListener){
    console.log(222);
    xl.addEventListener('change', function(e){
        var files = e.target.files;
        var f = files[0];
        var reader = new FileReader();
        var result = {};
        reader.onload = function(e) {
            var data = e.target.result;
            var wb = X.read(data, {type: 'binary'});
            wb.SheetNames.forEach(function(sheetName) {
                var roa = X.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
                if(roa.length > 0){
                    result[sheetName] = roa;
                }
            });
            var res = JSON.stringify(result, 2, 2);
            console.log(11);
            importExcle(result);
        };
        reader.readAsBinaryString(f);
    });
}

importExcle方法可对数据进行处理,如上传到服务器,或者输出到指定地方。