Angular get headers from excel uploaded using XLSX - excel

Question

I want to get the first row(name,email,mobile) as array from an uploaded excel file.
I am using XLSX.
I am getting whole data into array. But, I want only to read top line. because,
my excel file is quite large.
onFileChange(event) { //when user uploads xls file
const fileList: FileList = event.target.files;
if (fileList.length > 0) {
const file: File = fileList[0];
const reader = new FileReader();
reader.onload = function (e) {
const arrayBuffer = this.result,
data = new Uint8Array(arrayBuffer),
arr = new Array();
for (let i = 0; i !== data.length; ++i) {
arr[i] = String.fromCharCode(data[i]);
}
const bstr = arr.join('');
const workbook: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });
const firstSheetName: string = workbook.SheetNames[0];
const worksheet: XLSX.WorkSheet = workbook.Sheets[firstSheetName];
// getting all rows
console.log(XLSX.utils.sheet_to_json(worksheet, { header: 1 }));
// I want to get top row only.
console.log(XLSX.utils.decode_row('A1'));
};
reader.readAsArrayBuffer(file);
}
}

Answer 1

function get_header_row(sheet)
{
var headers = [];
var range = XLSX.utils.decode_range(sheet['!ref']);
var C, R = range.s.r;
* start in the first row */
/* walk every column in the range */
for(C = range.s.c; C <= range.e.c; ++C)
{
var cell = sheet[XLSX.utils.encode_cell({c:C, r:R})]
/* find the cell in the first row */
var hdr = "UNKNOWN " + C; // <-- replace with your desired default
if(cell && cell.t)
hdr = XLSX.utils.format_cell(cell);
headers.push(hdr);
}
return headers;
}

Answer 2

I've tried the file upload and below is my steps and result with both data and header,
This will also support multiple sheet within the excel sheet,
1.npm install --save xlsx
2.import * as XLSX from 'xlsx';
3.HTML Code:
<input type="file" (change)="onFileChange($event)">
4.Angular Typescript:
exceltoJson = {};
onFileChange(event: any) {
this.exceltoJson = {};
let headerJson = {};
/* wire up file reader */
const target: DataTransfer = <DataTransfer>(event.target);
// if (target.files.length !== 1) {
// throw new Error('Cannot use multiple files');
// }
const reader: FileReader = new FileReader();
reader.readAsBinaryString(target.files[0]);
console.log("filename", target.files[0].name);
this.exceltoJson['filename'] = target.files[0].name;
reader.onload = (e: any) => {
/* create workbook */
const binarystr: string = e.target.result;
const wb: XLSX.WorkBook = XLSX.read(binarystr, { type: 'binary' });
for (var i = 0; i < wb.SheetNames.length; ++i) {
const wsname: string = wb.SheetNames[i];
const ws: XLSX.WorkSheet = wb.Sheets[wsname];
const data = XLSX.utils.sheet_to_json(ws); // to get 2d array pass 2nd parameter as object {header: 1}
this.exceltoJson[`sheet${i + 1}`] = data;
const headers = this.get_header_row(ws);
headerJson[`header${i + 1}`] = headers;
// console.log("json",headers)
}
this.exceltoJson['headers'] = headerJson;
console.log(this.exceltoJson);
};
}
get_header_row(sheet) {
var headers = [];
var range = XLSX.utils.decode_range(sheet['!ref']);
var C, R = range.s.r; /* start in the first row */
/* walk every column in the range */
for (C = range.s.c; C <= range.e.c; ++C) {
var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
// console.log("cell",cell)
var hdr = "UNKNOWN " + C; // <-- replace with your desired default
if (cell && cell.t) {
hdr = XLSX.utils.format_cell(cell);
headers.push(hdr);
}
}
return headers;
}
5.Result
{filename: "uploadedexcel.xlsx", sheet1: Array(212), sheet2: Array(8), headers: {…}}
Results holds the uploaded excel name, data in the sheet1 and sheet2 and also header in the sheet1 and sheet2.
The uploaded excel sheets has sheet1 and sheet2.

Answer 3

I am using this code for single row header in excel sheet, but I want a two row header. Suggestions are welcome.
var Heading =[
[ "EMPLOYEE","SCORES","COMMENTS"]
];
const myworksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.emp ,{skipHeader:true});
XLSX.utils.sheet_add_json(myworksheet,this.emp,{skipHeader:true , origin: 'A2'});
XLSX.utils.sheet_add_aoa(myworksheet, Heading);

Answer 4

Here i am taking excel sheet from the blob
public DisplayExcelRows(ExcelURL from blob) {
var url = ExcelURL;
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
var excelrows: any;
oReq.onload = () => {
var arraybuffer = oReq.response;
/* convert data to binary string */
var data = new Uint8Array(arraybuffer);
var arr = new Array();
for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join("");
/* Call XLSX */
var workbook = XLSX.read(bstr, { type: "binary" });
/* DO SOMETHING WITH workbook HERE */
var first_sheet_name = workbook.SheetNames[0];
/* Get worksheet */
var worksheet = workbook.Sheets[first_sheet_name];
excelrows = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
//this will extract headers and other rows separately
this.data = excelrows;
this.header = this.data.shift(); //splitting headers and other rows
}

Answer 5

simplest way i found of doing this if you are using the json method then that is already generating objects with KEYS from the header so when using:
this.decoded = utils.sheet_to_json(workSheet);
just do this to get headers (assuming there was anything decoded):
this.columns = Object.keys(this.decoded[0]);
that will give you the columns, simply by getting the object keys which it used to generate them from the column names initially

Answer 6

// getting all rows
this.data = (XLSX.utils.sheet_to_json(worksheet, { header: 1 }));
// Fetch the first row
const header = this.data.shift();