最近作後臺項目遇到須要解析用戶上傳的excel文件,並導出文件中的數據的需求;在作這個需求的過程當中,才感受到我大Javascript是無所不能的啊,可以經過二進制方式讀取到excel文件中的內容,而後進一步讀取並操控excel文件中的數據,並將數據以本身須要的格式導出來。git
解析讀取excel文件,有一個很是好用的插件,在這裏強烈推薦給你們:github
Spreadsheet Parser and Writerjson
這個插件可以幫助你讀取到excel文件中的數據並將數據以json的格式導出來,很是好用,很是方便。app
如下是我在使用這個插件的過程當中所作的demo:this
var Excel = function () { this.data = [] // EXCEL數據 this.checkResult = false // EXCEL規範檢測結果 } Excel.prototype.check = function (fileSelector,checkStr,url,suc) { var self = this; document.querySelector(fileSelector).addEventListener('change',function (e) { var files = e.target.files; var fileReader = new FileReader(); // 以二進制方式打開文件 fileReader.readAsBinaryString(files[0]); fileReader.onload = function(ev) { try { var result = ev.target.result, workbook = XLSX.read(result, {type: "binary"}); // 以二進制流方式讀取獲得整份excel表格對象 } catch (e) { console.error("文件類型不正確"); return; } var fromTo = ''; //要讀取EXCEL的表格範圍 A1:C4 var excelHeadStr = ''; //讀取的EXCEL表頭 var headCol = ''; //表頭列號 var arr = ['A1','B1','C1','D1','E1','F1','G1','H1','I1','J1','K1','L1','M1','N1','O1','P1','Q1','R1','S1','T1','U1','V1','W1','X1','Y1','Z1'] var index ; // 遍歷workbook下的Sheets對象來讀取每個上傳文件的內容 for (var sheet in workbook.Sheets) { if (workbook.Sheets.hasOwnProperty(sheet)) { fromTo = workbook.Sheets[sheet]["!ref"]; // 獲取EXCEl文件中存在數據的行號和列號 for(var j = 0 ; j < 3 ; j++ ){ excelHeadStr += workbook.Sheets[sheet][arr[j]].h + ',' } // 去除字符串末尾',' excelHeadStr = excelHeadStr.substring(0, excelHeadStr.length - 1) if( excelHeadStr === checkStr ){ self.checkResult = true fileUpload(fileSelector,url,suc) }else{ console.error('EXCEL不符合模版規範') self.checkResult = false } self.data = self.data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet])); } } }; }) } function fileUpload(fileSelector,url,suc) { var file = document.querySelector(fileSelector).files[0], formData = new FormData(), reader = new FileReader(); // 判斷上傳文件類型 if (!/^.*?\.(xls|xlsx)$/i.test(file.name)){ console.error('所上傳文件類型不符') return false } formData.append('file',file) var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { var data = JSON.parse(xhr.responseText); var src = data.url; suc(src); } } xhr.onload = function (e) { if (xhr.status === 200) { console.log('uploaded'); } else { console.log('file upload failed'); } }; xhr.send(formData); }
調用Excel構造方法進行解析:url
var a = new Excel() a.check('#excel-file','分類,產品名稱,貨號','http://11.com/resource/_upload',function (src) { console.log(src) console.log(a.data) console.log(a.checkResult)})