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视图中显示它吗？

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

人|工作|（这是标题）查克|开发| 约翰|老师|

我想填一张桌子：

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

提前Thanx！

Answer 1

正如 charlietfl 正确指出的那样，每当你更改角度以外的东西时，你都必须调用$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]);
      });
    }
  };
});

你的控制器：

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

上传excel文件并使用数据

1 个答案: