AngularJS之前端解析excel文件

之前发现一款比较强大的js解析excel插件SheetJS js-xlsx，一直未投入到生产中使用。最近有批量导入的需求，大致看了下文档，使用比较方便快捷，容易上手，现在以AngularJS为例，介绍下其基本使用：

1、下载核心js文件xlsx.full.min.js，通过script标签引入到项目中

　　github地址：https://github.com/sheetjs/js-xlsx

2、编写自定义指令

  xxx.directive('importSheet', function () {
     return {
       scope: {opts: '='},
       link: function ($scope, $element, $attr) {
         /**
          * exp:<input type="file" name="uploadExcel" data-sheetname="批量导入" import-sheet multiple="false" />
          */
         //表格所在sheet页名称
         var sheetName = $attr.sheetname;
         $scope.dataList = [];
         $element.on('change', function (changeEvent) {
           var reader = new FileReader();
           reader.onload = function (e) {
             var bstr = e.target.result;
             var workbook = XLSX.read(bstr, {type: 'binary'});
             console.log('workbook', workbook)
             //将原始excel数据解析成json
             var dataList = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
             console.log('dataList', dataList);
           };
           reader.readAsBinaryString(changeEvent.target.files[0]);
         })
       }
     }
   })

3、在页面中使用此自定义指令，导入后的结果如下：

　　原始数据：

　　json格式的数据：

　　

　　同时，xlsx自带很多工具方法，可以根据实际业务需求酌情考虑：