js读取excel文件

在做项目的时候，需要上传一些excel文件内容到服务器。但是，用户没有点击提交的时候，或者刷新到其他页面的时候，需要放弃本次操作。本来是想着用redis来做缓存，暂时存储。但由于用户未点击提交的情况比较负责，不太适合此场景。SO，推荐一个比较成熟的解决方案：js-xlsx。

话不多说，直接上代码：
1. 定义一个文件上传项：

<input type="file" id="excel-file">

1. 下载js-xlsx的相应xlsx.core.min.js 文件后引入

$('#excel-file').change(function(e) {
            var files = e.target.files;

            var fileReader = new FileReader();
            fileReader.onload = function(ev) {
                try {
                    var data = ev.target.result,
                        workbook = XLSX.read(data, {
                            type: 'binary'
                        }), // 以二进制流方式读取得到整份excel表格对象
                        persons = []; // 存储获取到的数据
                } catch (e) {
                    console.log('文件类型不正确');
                    return;
                }

                // 表格的表格范围，可用于判断表头是否数量是否正确
                var fromTo = '';
                // 遍历每张表读取
                for (var sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        fromTo = workbook.Sheets[sheet]['!ref'];
                        console.log(fromTo);
                        persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                        // break; // 如果只取第一张表，就取消注释这行
                    }
                }

                console.log(persons);
            };

            // 以二进制方式打开文件
            fileReader.readAsBinaryString(files[0]);
        });

PS：这个是正常使用jquery解决的。But，我的就比较坑了，项目用的是angularjs 2，导致我有调试了半天，很坑，记录一下：
1. 定义一个文件上传项：

<input ng-model="agentIds" type="file" style="margin-left: 480px;" id="excel-file" onchange="angular.element(this).scope().readExcel(this.files)" >

1. 下载js-xlsx的相应xlsx.core.min.js 文件后引入

// 读取excel内容
    $scope.readExcel = function(e) {
        var files = e;
        console.log(e);


        var fileReader = new FileReader();
        fileReader.onload = function(ev) {
            try {
                var data = ev.target.result,
                    workbook = XLSX.read(data, {
                        type: 'binary'
                    }), // 以二进制流方式读取得到整份excel表格对象
                    persons = []; // 存储获取到的数据
            } catch (e) {
                console.log('文件类型不正确');
                return;
            }

            // 表格的表格范围，可用于判断表头是否数量是否正确
            var fromTo = '';

            // 遍历每张表读取
            for (var sheet in workbook.Sheets) {
                if (workbook.Sheets.hasOwnProperty(sheet)) {
                    fromTo = workbook.Sheets[sheet]['!ref'];
                    console.log(fromTo);
                    persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    // break; // 如果只取第一张表，就取消注释这行
                }
            }
            // 定义自己需要的返回值
            var res = "";
            for(var i = 0; i < persons.length; i++) {
                res += persons[i].agentId + ",";
            }
            if(res.endWith(",")) {
                res = res.substr(0, res.length-1);
            }

            $scope.agentIds = res;
            console.log("------>"+ $scope.agentIds);

        };

        String.prototype.endWith=function(endStr){
            var d=this.length-endStr.length;
            return (d>=0&&this.lastIndexOf(endStr)==d)
        }

        // 以二进制方式打开文件
        fileReader.readAsBinaryString(files[0]);
    }

官方地址：https://github.com/SheetJS/js-xlsx

最后，推荐一篇博客，对我帮助很大：前端读取Excel报表文件