I was trying to return result from FileReader and I found this implementation. But since it is outdated, I'm wondering how to implement the same using ES6 Promises or Rx Observables.
Below is my code with reference to the aforementioned link and it works as expected.
import { Injectable } from '@angular/core';
import * as XLSX from 'xlsx';
import * as XLS from 'xlsx';
@Injectable()
export class ExcelReaderService {
constructor() { }
importFromExcel(ev): JQueryPromise<any> {
let deferred = $.Deferred();
let regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xlsx|.xls)$/;
let workbook;
let excelInJSON;
if (regex.test(ev.target.files[0].name.toString().toLowerCase())) {
let xlsxflag = false; /*Flag for checking whether excel is .xls format or .xlsx format*/
if (ev.target.files[0].name.toString().toLowerCase().indexOf(".xlsx") > 0) {
xlsxflag = true;
}
let fileReader = new FileReader();
fileReader.onload = (ev) => {
let binary = "";
let bytes = new Uint8Array((<any>ev.target).result);
let length = bytes.byteLength;
for (let i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
/*Converts the excel data in to json*/
if (xlsxflag) {
workbook = XLSX.read(binary, { type: 'binary', cellDates: true, cellStyles: true });
// only first sheet
excelInJSON = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
deferred.resolve(excelInJSON);
}
else {
workbook = XLS.read(binary, { type: 'binary', cellDates: true, cellStyles: true });
excelInJSON = <{}[]>XLS.utils.sheet_to_row_object_array(workbook.Sheets[workbook.SheetNames[0]]);
deferred.resolve(excelInJSON);
}
}
// init read
if (xlsxflag)
fileReader.readAsArrayBuffer((<any>ev.target).files[0]);
else
fileReader.readAsBinaryString((<any>ev.target).files[0]);
} else {
deferred.reject('Invalid file!');
}
return deferred.promise();
}
}
In the consumer component
this.excelReaderService.importFromExcel(ev).then((result) => {
this.detailHeadings = Object.keys(result[0]);
this.detailData = result;
})
It'll be great if someone helps me with this as I'm new to asynchronous programming.
This is how I did it, in case anyone wants an Angular service that reads Excel files and responds with an observable of the content as JSON.
I'm using SheetJS for reading the file and outputting JSON.
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import * as XLSX from 'xlsx';
@Injectable()
export class ExcelReaderService {
constructor() { }
importFromExcel(ev): Observable<any> {
let workbook;
let excelInJSON;
const fileReader = new FileReader();
// init read
fileReader.readAsArrayBuffer((<any>ev.target).files[0]);
return Observable.create((observer: Subscriber<any[]>): void => {
// if success
fileReader.onload = ((ev: ProgressEvent): void => {
let binary = "";
let bytes = new Uint8Array((<any>ev.target).result);
let length = bytes.byteLength;
for (let i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
// Converts the excel data in to json
workbook = XLSX.read(binary, { type: 'binary', cellDates: true, cellStyles: true });
// only first sheet
excelInJSON = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
observer.next(excelInJSON);
observer.complete();
}
// if failed
fileReader.onerror = (error: FileReaderProgressEvent): void => {
observer.error(error);
}
});
}
}
From the component, just pass the event to this service as shown below and it will respond with the JSON.
this.excelReaderService.importFromExcel(ev)
.subscribe((response: any[]): void => {
// do something with the response
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments