Convert Excel Files Into The Various Format In Angular

The Code Points September 03, 2022 0

In this article, we will learn how to convert Excel files in text, HTML, JSON, and CSV forms. For this, we will use the xlsx and file-saver npm packages.

So, let's start with the implementation

First, we need to create a new angular application using the following command in the terminal.

ng new read-excel-in-angular

Now, install the xlsx add file-saver npm package using the following command into the terminal.

npm install xlsx
npm install file-saver --save

Now, add the following code under the app.component.html file.

<div class="container">
  <div class="row">
    <div class="col-md-8 form-group">
      <input type="file" class="form-control" (change)="uploadedFile($event)" placeholder="Upload file" accept=".xlsx">
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 form-group">
      <button type="button" class="btn btn-info" (click)="readAsCSV()">Read as CSV</button>
    </div>
    <div class="col-md-2 form-group">
      <button type="button" class="btn btn-info" (click)="readAsJson()">Read as JSON</button>
    </div>
    <div class="col-md-2 form-group">
      <button type="button" class="btn btn-info" (click)="readAsHTML()">Read as HTML</button>
    </div>
    <div class="col-md-2 form-group">
      <button type="button" class="btn btn-info" (click)="readAsText()">Read as Text</button>
    </div>
  </div>
</div>

Now, open the app.component.ts file and add the following code.

import { Component } from '@angular/core';
import * as XLSX from 'xlsx';
import * as FileSaver from 'file-saver';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'read-excel-in-angular8';
  storeData: any;
  csvData: any;
  jsonData: any;
  textData: any;
  htmlData: any;
  fileUploaded: File;
  worksheet: any;
  uploadedFile(event) {
    this.fileUploaded = event.target.files[0];
    this.readExcel();
  }
  readExcel() {
    let readFile = new FileReader();
    readFile.onload = (e) => {
      this.storeData = readFile.result;
      var data = new Uint8Array(this.storeData);
      var arr = new Array();
      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];
      this.worksheet = workbook.Sheets[first_sheet_name];
    }
    readFile.readAsArrayBuffer(this.fileUploaded);
  }
  readAsCSV() {
    this.csvData = XLSX.utils.sheet_to_csv(this.worksheet);
    const data: Blob = new Blob([this.csvData], { type: 'text/csv;charset=utf-8;' });
    FileSaver.saveAs(data, "CSVFile" + new Date().getTime() + '.csv');
  }
  readAsJson() {
    this.jsonData = XLSX.utils.sheet_to_json(this.worksheet, { raw: false });
    this.jsonData = JSON.stringify(this.jsonData);
    const data: Blob = new Blob([this.jsonData], { type: "application/json" });
    FileSaver.saveAs(data, "JsonFile" + new Date().getTime() + '.json');
  }
  readAsHTML() {
    this.htmlData = XLSX.utils.sheet_to_html(this.worksheet);
    const data: Blob = new Blob([this.htmlData], { type: "text/html;charset=utf-8;" });
    FileSaver.saveAs(data, "HtmlFile" + new Date().getTime() + '.html');
  }
  readAsText() {
    this.textData = XLSX.utils.sheet_to_txt(this.worksheet);
    const data: Blob = new Blob([this.textData], { type: 'text/plain;charset=utf-8;' });
    FileSaver.saveAs(data, "TextFile" + new Date().getTime() + '.txt');
  }
}

Now, open the index.html file and using the following code add the bootstrap and jQuery references there.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ReadExcelInAngular8</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Now, run the application using the ng serve command into the terminal and see the browser screen, now we are able to browse the excel file and download it into the CSV, JSON, HTML, and TEXT format.

Conclusion

In this article, we learned how to convert excel files into text, HTML, JSON, and CSV forms in angular using the xlsx and file-saver npm packages.

I hope this article helps you and you will like it.👍

Please give your valuable feedback and comments or suggestion in the comment section

If you have any doubt or confusion then free to ask in the comment section.

Convert Excel Files Into The Various Format In Angular

Convert Excel Files Into The Various Format In Angular

Conclusion

Post a Comment