HTML选择Excel文件显示表格

时间：2024-02-21 16:06:43

1、下载xlxs

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

2、导入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>

3、HTML代码：

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

4、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：

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

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

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

 

 

 

相关文章