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自帶很多工具方法，可以根據實際業務需求酌情考慮：