在做項目的時候，需要上傳一些excel文件內容到服務器。但是，用戶沒有點擊提交的時候，或者刷新到其他頁面的時候，需要放棄本次操作。本來是想著用redis來做緩存，暫時存儲。但由于用戶未點擊提交的情況比較負責，不太適合此場景。SO，推薦一個比較成熟的解決方案：js-xlsx。

話不多說，直接上代碼：
1. 定義一個文件上傳項：

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

下載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)" >

下載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報表文件

總結

以上是生活随笔為你收集整理的js读取excel文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。