Introduction

Today, we will learn about downloading an Excel file in various formats in Angular, like text, HTML, JSON, and CSV. We will be using file saver and .xlsx packages for this purpose and will upload an Excel file from the UI rather than a static path or source, in order to make it dynamic.

Prerequisites

  • Basic knowledge of Angular
  • Any editor likes Visual Studio Code.

Create a new project in Angular and name it as read-excel-in-angular8

Upload And Download Excel Files In Various Format In Angular 8
Open the newly created project and add xlsx npm package and file saver package.
Upload And Download Excel Files In Various Format In Angular 8
Upload And Download Excel Files In Various Format In Angular 8
  1. npm install xlsx
  2. npm install file-saver --save
Open the app.component.html file and add the following code in it.
  1. <div class="container">
  2. <div class="row">
  3. <div class="col-md-8 form-group">
  4. <input type="file" class="form-control" (change)="uploadedFile($event)" placeholder="Upload file" accept=".xlsx">
  5. </div>
  6. </div>
  7. <div class="row">
  8. <div class="col-md-2 form-group">
  9. <button type="button" class="btn btn-info" (click)="readAsCSV()">Read as CSV</button>
  10. </div>
  11. <div class="col-md-2 form-group">
  12. <button type="button" class="btn btn-info" (click)="readAsJson()">Read as JSON</button>
  13. </div>
  14. <div class="col-md-2 form-group">
  15. <button type="button" class="btn btn-info" (click)="readAsHTML()">Read as HTML</button>
  16. </div>
  17. <div class="col-md-2 form-group">
  18. <button type="button" class="btn btn-info" (click)="readAsText()">Read as Text</button>
  19. </div>
  20. </div>
  21. </div>
Open the app.component.ts file and add the following code in it.
  1. import { Component } from '@angular/core';
  2. import * as XLSX from 'xlsx';
  3. import * as FileSaver from 'file-saver';
  4. @Component({
  5. selector: 'app-root',
  6. templateUrl: './app.component.html',
  7. styleUrls: ['./app.component.css']
  8. })
  9. export class AppComponent {
  10. title = 'read-excel-in-angular8';
  11. storeData: any;
  12. csvData: any;
  13. jsonData: any;
  14. textData: any;
  15. htmlData: any;
  16. fileUploaded: File;
  17. worksheet: any;
  18. uploadedFile(event) {
  19. this.fileUploaded = event.target.files[0];
  20. this.readExcel();
  21. }
  22. readExcel() {
  23. let readFile = new FileReader();
  24. readFile.onload = (e) => {
  25. this.storeData = readFile.result;
  26. var data = new Uint8Array(this.storeData);
  27. var arr = new Array();
  28. for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
  29. var bstr = arr.join("");
  30. var workbook = XLSX.read(bstr, { type: "binary" });
  31. var first_sheet_name = workbook.SheetNames[0];
  32. this.worksheet = workbook.Sheets[first_sheet_name];
  33. }
  34. readFile.readAsArrayBuffer(this.fileUploaded);
  35. }
  36. readAsCSV() {
  37. this.csvData = XLSX.utils.sheet_to_csv(this.worksheet);
  38. const data: Blob = new Blob([this.csvData], { type: 'text/csv;charset=utf-8;' });
  39. FileSaver.saveAs(data, "CSVFile" + new Date().getTime() + '.csv');
  40. }
  41. readAsJson() {
  42. this.jsonData = XLSX.utils.sheet_to_json(this.worksheet, { raw: false });
  43. this.jsonData = JSON.stringify(this.jsonData);
  44. const data: Blob = new Blob([this.jsonData], { type: "application/json" });
  45. FileSaver.saveAs(data, "JsonFile" + new Date().getTime() + '.json');
  46. }
  47. readAsHTML() {
  48. this.htmlData = XLSX.utils.sheet_to_html(this.worksheet);
  49. const data: Blob = new Blob([this.htmlData], { type: "text/html;charset=utf-8;" });
  50. FileSaver.saveAs(data, "HtmlFile" + new Date().getTime() + '.html');
  51. }
  52. readAsText() {
  53. this.textData = XLSX.utils.sheet_to_txt(this.worksheet);
  54. const data: Blob = new Blob([this.textData], { type: 'text/plain;charset=utf-8;' });
  55. FileSaver.saveAs(data, "TextFile" + new Date().getTime() + '.txt');
  56. }
  57. }
Finally, open the index.html file present at the root directory and add the bootstrap and jQuery references in it.
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>ReadExcelInAngular8</title>
  6. <base href="/">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <link rel="icon" type="image/x-icon" href="favicon.ico">
  9. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  11. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  12. </head>
  13. <body>
  14. <app-root></app-root>
  15. </body>
  16. </html>
Output
Upload And Download Excel Files In Various Format In Angular 8
Please give your valuable feedback/comments/questions about this article. Please let me know how you like and understand this article and how I could improve it.