Excel Reader app Angular - How to upload Excel file in angular

? Subscribe for more angular videos with live examples
http://www.youtube.com/channel/UC-FyE8pmbzUw7sb293FOdlA?sub_confirmation=1

Uploading files is a common requirement in Angular apps and in this video, we see how easy it is.

You can find the source code in the below git-hub repository:
https://github.com/sadupawan1990/excelreader

Code:
Excelsheet.component.ts
import { Component, OnInit } from '@angular/core';
import * as XLSX from 'xlsx';

@Component({
selector: 'app-excelsheet',
templateUrl: './excelsheet.component.html',
styleUrls: ['./excelsheet.component.css']
})
export class ExcelsheetComponent implements OnInit {

data: [][];
constructor() { }

ngOnInit(): void {
}
onFileChange(evt: any) {
const target : DataTransfer = DataTransfer (evt.target);

if (target.files.length !== 1) throw new Error('Cannot use multiple files');

const reader: FileReader = new FileReader();

reader.onload = (e: any) = {
const bstr: string = e.target.result;

const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });

const wsname : string = wb.SheetNames[0];

const ws: XLSX.WorkSheet = wb.Sheets[wsname];

console.log(ws);

this.data = (XLSX.utils.sheet_to_json(ws, { header: 1 }));

console.log(this.data);


};

reader.readAsBinaryString(target.files[0]);

}

}


Search Tags
excel reader app angular | angular read excel file | read excel file in javascript | exceljs angular 6 | exceljs angular |excel angular | spreadsheet javascript | spreadsheet angular | angular excel export | how to read excel file in angularjs | how to read excel file in angular | read excel file in angular | read excel file in angular 6 | upload excel file in angular 6 | upload excel file in angular 9 | upload excel file in angular | upload excel file in angular 4 | upload excel file in angular 7 | upload excel file in angular 6 and spring boot | how to upload file in angular | how to upload file in angular 8 | how to upload file in angular 6 | how to upload file in angularjs | how to upload file in angular with web api | file upload control in angular 8 | file upload control in angular material | File Upload in Angular 7 | File Upload in Angular 8 | angular multiple file upload | angular file upload progress bar | angular | angular tutorial | angular ngOnchanges example | angular tutorial for beginners |