Angular 4: How to read data from Excel?

by

You should follow these 3 steps

step 1: import ts-xlsx
refer: https://www.npmjs.com/package/ts-xlsx for installation

step 2: Using FileReader convert to arraybuffer

step 3: Reading the arraybuffer with XLSX and converting as workbook

HTML CODE

<input type="file" style="display: inline-block;" (change)="incomingfile($event)" placeholder="Upload file" accept=".xlsx">
<button type="button" class="btn btn-info" (click)="Upload()" >Upload</button>

Typescript

//import it

    import * as XLSX from 'ts-xlsx';

//inside export class

arrayBuffer:any;
file:File;
incomingfile(event) 
  {
  this.file= event.target.files[0]; 
  }

 Upload() {
      let fileReader = new FileReader();
        fileReader.onload = (e) => {
            this.arrayBuffer = fileReader.result;
            var data = new Uint8Array(this.arrayBuffer);
            var arr = new Array();
            for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
            var bstr = arr.join("");
            var workbook = XLSX.read(bstr, {type:"binary"});
            var first_sheet_name = workbook.SheetNames[0];
            var worksheet = workbook.Sheets[first_sheet_name];
            console.log(XLSX.utils.sheet_to_json(worksheet,{raw:true}));
        }
        fileReader.readAsArrayBuffer(this.file);
}

More Related Contents:

  1. Difference between Constructor and ngOnInit
  2. Dynamically add event listener
  3. I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular
  4. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  5. Use component from another module
  6. How to write unit testing for Angular / TypeScript for private methods with Jasmine
  7. Angular and Typescript: Can’t find names – Error: cannot find name
  8. Angular 2 Scroll to top on Route Change
  9. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  10. Getting “Uncaught (in promise): TypeError: Object(…) is not a function” Error from Ionic-native VideoEditor Plugin
  11. Typescript/Angular/ES6: can I finally let `hasOwnProperty()` die in for loops?
  12. async/await in Angular `ngOnInit`
  13. How to inject service into class (not component)
  14. Emit event from parent to child
  15. Angular2 router keep query string
  16. Angular 2 ‘component’ is not a known element
  17. How to make a sequence of http requests in Angular 6 using RxJS
  18. How to smooth scroll to page anchor in angular 4 without plugins properly?
  19. How to set unique template reference variables inside an *ngFor? (Angular)
  20. Getting Image from API in Angular 4/5+?
  21. Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef
  22. Angular 4 HttpClient Query Parameters
  23. Function DocumentReference.set() called with invalid data. Unsupported field value: a custom Budget object
  24. Can’t bind to ‘formControl’ since it isn’t a known property of ‘input’ – Angular2 Material Autocomplete issue
  25. Type casting within a template in Angular 2
  26. Property ‘toPromise’ does not exist on type ‘Observable’
  27. TypeError: Object prototype may only be an Object or null: undefined Angular 8
  28. Angular 4 ExpressionChangedAfterItHasBeenCheckedError
  29. Page transition animations with Angular 2.0 router and component interface promises
  30. Angular load external configuration before AppModule loads

Leave a Comment