Javascripts把Excel解析爲json(js-xlsx)

最近碰到了導入導出Excel的一些問題,在此分享一下我的解決過程
演示demo(點擊)

點擊查看Javascripts/Java把json數據導出Excel(js-xlsx&&POI)

需求場景

js-xlsx—gitHub
有時候有會有這樣的需求,將Excel的數據導入數據庫.後端後大名鼎鼎的POI,但是這樣會存在一些問題,如果excel文件過大,解析起來非常佔用服務器資源.於是百度了一下,原來前端也有excel導入導出的解決方案,就是js-xlsx了.把解析excel的工作放在前端,極大的減輕服務器壓力.

步驟(思路)

• 上傳Excel文件
• 利用Html5中的ApiFileReader將文件讀取爲二進制流
• FileReader的實例有很多事件,我們只需要關注其onload事件(當流讀取完成會觸發)
• 拿到二進制流使用XLSX的read方法將二進制流轉換爲一個WorkBook對象
• 其實WorkBook裏面已經包含了我們所需要的數據了,但是裏面還有很多我們不關注的信息.
• 最後將我們關注的信息重新封裝即可

動畫演示

代碼分析

<script>
    document.getElementById('btn').onclick = function () {//點擊事件
      var fileEle = document.getElementById("xlsxFile"); //文本框的元素
      var reader = new FileReader();//創建一個文件輸入流
      reader.readAsBinaryString(fileEle.files[0])//把文本框的文件讀取爲二進制流
      reader.onload = function (e) {//讀取完成觸發的事件
        var workbook = XLSX.read(e.target.result, { type: 'binary' })//將二進制流轉換成workBook對象（也就是工作簿對象，打印在控制檯了可以看一看）
        console.log('工作簿對象');
        console.log(workbook);
        console.log('每個工作表的轉換成json的數據');
        console.log(JSON.parse(to_json(workbook)));
        document.getElementById("jsonContent").innerHTML=to_json(workbook)
      }
    }

    //將workbook的數據轉換爲json數據
    function to_json(workbook) {
      var result = {};
      workbook.SheetNames.forEach(function (sheetName) {
        var roa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], {
          header: 1
        });
        if (roa.length)
          result[sheetName] = roa;
      });
      return JSON.stringify(result, 2, 2);
    };
  </script>