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];
                        });