Duration 21:43

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

30 993 watched
0
549
Published 2 May 2020

🔔 Subscribe for more angular videos with live examples /channel/UC-FyE8pmbzUw7sb293FOdlA 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 |

Category

Show more

Comments - 92