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>