javascript - 上传excel文件并消费数据

Question

我正在尝试创建一个 moule，用户可以在其中上传 Excel 文件并从文档中获取数据。我正在使用js-xlsx图书馆。现在，通过下一个代码，我在示例文件的控制台上以 json 形式获取信息:

$scope.ExcelExport= function (event) {

    var input = event.target;
    var reader = new FileReader();
    reader.onload = function(){
        var fileData = reader.result;
        var wb = XLSX.read(fileData, {type : 'binary'});

        wb.SheetNames.forEach(function(sheetName){
        var rowObj = XLSX.utils.sheet_to_json(wb.Sheets[sheetName]);
        $scope.jsonObj = rowObj;
        console.log($scope.jsonObj);
        })

    };
    reader.readAsBinaryString(input.files[0]);
    };

我知道我必须保存文档，但是:有一种方法可以将读取的信息存储在我的控制台上并将其显示在 html View 上吗？

根据示例，假设我的示例文件在两列中包含下一个数据:

人|工作 |(这是标题)查克 |开发商|约翰 |老师|

我想填充一个表:

<div class="row">
<div class="col-lg-11">
    <form class="form-inline">
        <div class="am form-group">
        </div>
        <div class="container">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>Person</th>
                    <th>Job</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="x in jsonObj">
                    <th>{{x.Person}}</th>
                    <th>{{x.Job}}</th>
                </tr>
                </tbody>
            </table>
        </div>
    </form>
</div>

我正在使用 angularjs 和 Javascript。

提前致谢!

Answer 1

正如charlietfl正确指出的那样，每当您更改 Angular 之外的内容时，都必须调用$scope.$apply()。

对于错误TypeError: Cannot read property 'charCodeAt' of null，更改:

var fileData = reader.result;

至

var fileData = input.result;

以下是我组织此功能的方式。

您的指令:

angular.module("app").directive("importSheetJs", function($parse) {
  return {
    link: function($scope, $elm, $attrs) {
      // Parse callback function from attribute
      var expressionHandler = $parse($attrs.onSheetLoad);

      // Pass upload event to callback    
      $elm.on("change", function(changeEvent) {
        var reader = new FileReader();
        reader.onload = function(e) {
          expressionHandler($scope, { e: e });
        };
        reader.readAsBinaryString(changeEvent.target.files[0]);
      });
    }
  };
});

您的 Controller :

angular.module("app").controller("MainController", function($scope) {
  $scope.loadWorksheet = function(e) {
    // Read Workbook
    var file = e.target.result;
    var workbook = XLSX.read(file, { type: "binary" });

    // Get the first worksheet as JSON
    var sheetName = workbook.SheetNames[0];
    $scope.sheet = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);

    // Log it and update scope
    console.log(sheet);
    $scope.sheet = sheet;
    $scope.$apply(); // Need this to update angular with the changes
  };
});

然后在你的html中:

<input type="file" import-sheet-js="" on-sheet-load="loadWorksheet(e)" multiple="false" />  

Here's a working example on codepen