Loading

how to display excel data on the screen

how to display excel data on the screen

Munagala Sreenivas

Hi all

I have an issue as below

I am using angular 4

i wanto display the data from excel and display the same on the screen

To acheive it i have used the following code

appcomponent.ts

import { Component } from '@angular/core';
import * as XLSX from 'ts-xlsx';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'doctypeautomation';
arrayBuffer: any;
file: File;
incomingfile(event) {
this.file = event.target.files[0];
}
Upload()
{
let fReader: FileReader = new FileReader();
fReader.onload = (e) => {
this.arrayBuffer = fReader.result;
var data = new Uint8Array(this.arrayBuffer);
var arr = new Array();
var jsonData = [];
//var jsonData: string [];
for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join("");
var workbook = XLSX.read(bstr, {type:"binary"});
var first_sheet_name = workbook.SheetNames[0];
var worksheet = workbook.Sheets[first_sheet_name];
console.log(XLSX.utils.sheet_to_json(worksheet, {raw: true}));
//jsonData.push(XLSX.utils.sheet_to_json(worksheet, {raw: true}));
this.jsonData = fReader.result;
// const obj = JSON.parse(worksheet);
}
fReader.readAsArrayBuffer(jsonData);
console.log('i am from uploads');
}
}

appcomponent.html

<div style="text-align:center">
<h2>Here are some links to help you starts: h2>
<input type="file" style="display: inline-block;" (change)="incomingfile($event)" placeholder="Upload file" accept=".xlsx">
<button type="button" class="btn btn-info" (click)="Upload()" >Uploadbutton>
<ul>
<li *ngFor="let js of jsondata">
<span>{{js.Apple}}span>
<span>{{js.Bat}}span>
<span>{{js.Cat}}span>
<span>{{sree}span>
li>
ul>
<router-outlet>router-outlet>

I am not able to display any thing on the screen

I am ble to see the uploadfile and Button only. Please help me in any sample code for this

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Jignesh Kumar7y ago
Hello,

Please try below link,
https://www.grapecity.com/blogs/how-to-import-and-export-excel-spreadsheets-in-angular
0