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

私は私が文書を保存する必要があります知っている、しかし：保存されたreadedへの道があります私のコンソール上の情報とhtmlビューに表示？例えば、パー

、のは私のサンプルファイルが2列に次のデータを持っているとしましょう：

人|ジョブ|（これはヘッダーです） チャック|開発者| John |教師|

は、私はテーブルを移入したい：私はangularjsとJavascriptを使用してい

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

。

前もって太もも！

Answer 1

charlietflが正しく指摘されている場合は、角度の外に何かを変更するたびに$scope.$apply()に電話する必要があります。

エラーTypeError: Cannot read property 'charCodeAt' of nullについては、変更：

var fileData = input.result;

へ

var fileData = reader.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]); 
     }); 
    } 
    }; 
}); 

あなたのコントローラ：

あなたのhtmlで次に

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

：

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

Here's a working example on codepen