Wednesday, March 27, 2019

I am getting started with js-xlsx to redisplay what is in an Excel sheet up to the UI in Angular 7 app in the name of giving users a visual sanity check.

Alright, assuming something like this, I can remake my uploadFile method like so to at least be able to loop through the names of the tabs in the Excel sheet. This is how far I got today.

uploadFile(event:any):void{
   let filePath = event.target.value;
   if (filePath && event.target.files && event.target.files.length){
      let file = event.target.files[0];
      var reader = new FileReader();
      reader.onload = function(e:any) {
         var data = e.target.result;
         data = new Uint8Array(data);
         this.processWorkbook(XLSX.read(data, {type: 'array'}));
      }.bind(this);
   }
}
 
processWorkbook(workbook){
   workbook.SheetNames.forEach(function(sheetName) {
      alert(sheetName);
   });
}

 
 

Define the XLSX variable at the top of your component with the other imports like so, and by the way you have to have the first line here to get the TypeScript compiler to stop complaining about the require in the second line. This is the way you to that.

declare var require: any;
var XLSX = require('xlsx');

 
 

You may install xlsx via npm like so and that means there probably is also a better way to grab ahold of it as an import that I have not yet uncovered:

npm install xlsx

 
 

The tool is described here and here. (View the source HTML at the second URL.)

 
 

Addendum 3/28/2019: This is kinda weak. There is more to see here.

No comments:

Post a Comment