在實際開發中，經常會遇到匯入Excel檔案的需求，有的產品人想法更多，想要在前端直接判斷檔案內容格式是否正確，必填項是否已填寫

依據HTML5的FileReader，可以使用新的API開啟本地檔案（參考這篇文章）

• FileReader.readAsBinaryString(Blob|File)
• FileReader.readAsText(Blob|File, opt_encoding)
• FileReader.readAsDataURL(Blob|File)
• FileReader.readAsArrayBuffer(Blob|File)

通過 readAsBinaryString 雖然能開啟二進位制檔案（*.pdf、*.doc、*.xls等），但如若要直接通過JS進行判斷這些二進位制資料是否符合要求，是不行的

所以就需要轉換，對於Excel檔案的內容分析轉換，已經有了比較成熟的解決方案：js-xlsx 

其實現方式也用到了上述新特性，看看具體要怎麼用

1. 首先定義一個檔案上傳項

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

<script type="text/javascript" src="xlsx.core.min.js"></script>

3. 監聽檔案選擇，即時開啟檔案獲取表格內容

使用XLSX.utils.sheet_to_json方法解析表格物件返回相應的JSON資料

    $('#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]);
        });

上述程式碼只是簡單地獲取表格檔案的內容，如果要判斷，還得根據實際加上一些判斷邏輯

js-xlsx只能讀取相關的檔案，否則會報錯

4. 表格檔案內容

使用一個excel表格，定義了三張表

5. 檢視獲取到的資料

紅框部分為三個表項的不同之處，看看程式碼執行之後的結果：

第一個紅框是每張表的資料範圍，由於js-xlsx這個庫自身的問題，它是不會直接獲取到表頭資料儲存起來的，而是直接把表頭放到最末級的內容物件裡面

可自行逐級看看讀取到的表格workbook物件內容：

如果要判斷表頭的數量，就需要使用到!ref屬性

在excel檔案中，A1:D3中的字母指代列待號，緊接其後的數字指代行號，所以判斷表頭數量，即為判斷列號數量

比如第一張表有四個表頭，所以為A-D;第三張表有五個表頭，所以為A-E，如

if (fromTo[0] === 'A' && fromTo[3] === 'D') {
     excelIsOk = true;
}

 這只是單單判斷表頭數量，還得判斷表頭內容

        　　　　console.log(persons);

                var headStr = '姓名,性別,年齡,學校';
                for (var i = 0; i < persons.length; i++) {
                    if (Object.keys(persons[i]).join(',') !== headStr) {
                        persons.splice(i, 1);
                    }
                }

                console.log(persons);

可以看到，倒數第二項的JSON資料，因為表頭內容不匹配，被過濾掉了

這裡還得注意的是最後一項，雖然有個表頭，但因為沒有內容，所以得到的JSON是符合要求的，所以就需要用到那個!ref屬性來共同判斷表格是否符合要求

6. 其他

除此之外，還有更多用法如XLSX.readFile、XLSX.writeFile等，具體就看看官方文件吧