上传 excel 个文件并消耗数据

Question

我正在尝试创建一个模块，用户可以在其中上传 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 视图中显示吗？

举个例子，假设我的示例文件在两列中有下一个数据：

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

我想填充一个 table:

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

您的控制器：

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 个文件并消耗数据

Upload excel files and consume data

javascript

angularjs

js-xlsx