Javascript 上传excel文件并使用数据

我正在尝试创建一个用户可以上传excel文件并从文档中获取数据的模型。我在用图书馆。现在，在接下来的代码中，我将在示例文件的控制台上以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视图中显示

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

人员|作业|（这是标题） Chuck |显影剂| 约翰|老师|

我想填充一个表：

<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>

人
工作
{{x.Person}
{{x.Job}

我正在使用angularjs和Javascript

---

先走一步

正如charlietfl正确指出的那样，无论何时更改外部内容，都必须调用

$scope.$apply（）

对于错误

TypeError:无法读取null的属性'charCodeAt'，请更改：

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]);
      });
    }
  };
});

您的控制器：

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" />  



正如charlietfl正确指出的那样，每当您更改angular之外的内容时，必须调用
$scope.$apply（）

对于错误
TypeError:无法读取null的属性'charCodeAt'，请更改：

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]);
      });
    }
  };
});

您的控制器：

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" />  



读卡器。onload
回调在上下文之外。当您在angular之外更改范围值时，需要告诉angular运行摘要。尝试调用$scope。$apply（）Thaks，我已尝试并向我发送下一个警报：
TypeError:无法读取null
读取器的属性“charCodeAt”。onload
回调在上下文之外。当您在angular之外更改范围值时，需要告诉angular运行摘要。尝试调用$scope。$apply（）Thaks，我已尝试并向我发送下一个警报：
TypeError:无法读取null的属性“charCodeAt”