HTML选择Excel文件显示表格

一、下载xlxs

下载地址：https://github.com/SheetJS/js-xlsx

二、导入xlsx.core.min.js

<script src="lib/xlsx.core.min.js"></script>

或者在线引入：

<script src="https://cdn.bootcss.com/xlsx/0.11.9/xlsx.core.min.js"></script>

三、HTML代码：

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

四、script代码：

$('#open-excel').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'
                        }), 
                        values = []; // 存储获取到的数据
                } catch (e) {
                    console.log('文件类型不正确');
                    return;
                }

                // 遍历每张表读取
                for (var sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        values = values.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                        //break; // 若是只取第一张表，就取消注释这行
                    }
                }
                
            // 以二进制方式打开文件
            fileReader.readAsBinaryString(files[0]);
        });

values中将获得一个json数组，返回Excel数据

 

PS：

一、jQuery的change方法修改某值，写在$scope.$apply(function(){......})里

二、将键值对取出分别存在两个数组里的方法：

 $scope.itemArray = Object.getOwnPropertyNames(object);  //object为存储多组键值对的数组  
 $scope.valueArray = Object.getOwnPropertyNames(object).map(function (item) {
                            return object[item];
                        });