1
Answer

how to display excel data on the screen

Munagala Sreenivas

Munagala Sreenivas
5y
1.5k
1
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
  1. import { Component } from '@angular/core';  
  2. import * as XLSX from 'ts-xlsx';  
  3.   
  4. @Component({  
  5. selector: 'app-root',  
  6. templateUrl: './app.component.html',  
  7. styleUrls: ['./app.component.css']  
  8. })  
  9. export class AppComponent {  
  10. title = 'doctypeautomation';  
  11.   
  12. arrayBuffer: any;  
  13. file: File;  
  14. incomingfile(event) {  
  15. this.file = event.target.files[0];  
  16. }  
  17.   
  18. Upload()  
  19. {  
  20. let fReader: FileReader = new FileReader();  
  21. fReader.onload = (e) => {  
  22. this.arrayBuffer = fReader.result;  
  23. var data = new Uint8Array(this.arrayBuffer);  
  24. var arr = new Array();  
  25. var jsonData = [];  
  26. //var jsonData: string [];  
  27. for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);  
  28. var bstr = arr.join("");  
  29. var workbook = XLSX.read(bstr, {type:"binary"});  
  30. var first_sheet_name = workbook.SheetNames[0];  
  31. var worksheet = workbook.Sheets[first_sheet_name];  
  32. console.log(XLSX.utils.sheet_to_json(worksheet, {raw: true}));  
  33. //jsonData.push(XLSX.utils.sheet_to_json(worksheet, {raw: true}));  
  34. this.jsonData = fReader.result;  
  35. // const obj = JSON.parse(worksheet);  
  36.   
  37. }  
  38. fReader.readAsArrayBuffer(jsonData);  
  39. console.log('i am from uploads');  
  40. }  
  41. }  
appcomponent.html
  1. <!--The content below is only a placeholder and can be replaced.-->  
  2. <div style="text-align:center">  
  3. <h2>Here are some links to help you starts: </h2>  
  4.   
  5. <input type="file" style="display: inline-block;" (change)="incomingfile($event)" placeholder="Upload file" accept=".xlsx">  
  6. <button type="button" class="btn btn-info" (click)="Upload()" >Upload</button>  
  7.   
  8. <ul>  
  9. <li *ngFor="let js of jsondata">  
  10. <span>{{js.Apple}}</span>  
  11. <span>{{js.Bat}}</span>  
  12. <span>{{js.Cat}}</span>  
  13. <span>{{sree}</span>  
  14. </li>  
  15. </ul>  
  16. <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
Answers (1)
Next Recommended Forum