Hochladen von Dateien und konsumieren von Daten

Question

Ich versuche ein moule zu erstellen, wo der Benutzer eine Excel-Datei hochladen und Daten aus dem Dokument abrufen kann. Ich benutze die js-xlsx Bibliothek. Gerade jetzt, mit dem nächsten Code, erhalte ich die Informationen auf der Konsole meiner Beispieldatei als 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]); 
    }; 

Ich weiß, ich habe das Dokument zu speichern, aber: Es gibt einen Weg, um gespeicherte der readed Info auf meiner Konsole und zeigen Sie es in der HTML-Ansicht?

Per Beispiel, sagen wir mal, dass meine Beispieldatei die nächsten Daten in zwei Spalten:

Person | Job | (Dies ist die Kopfzeile) Chuck | Entwickler | John | Lehrer |

und ich möchte eine Tabelle füllen:

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

Ich AngularJS und Javascript verwenden.

Vielen Dank im Voraus!

Answer 1

Als charlietfl richtig hingewiesen, müssen Sie $scope.$apply() aufrufen, wenn Sie etwas außerhalb von eckigen ändern.

Was den Fehler TypeError: Cannot read property 'charCodeAt' of null ändern:

var fileData = reader.result;

zu

var fileData = input.result;

Hier ist, wie ich diese Funktion organisieren würde.

Ihre Richtlinie:

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

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

Dann in Ihrem html:

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

Here's a working example on codepen