Export to Excel in Angular 6 | 7 | 8 | 9 | 10

-

How to export the data in excel in Angular

In Angular, we have different types libraries to export the data into excel file in different formats like (.xlsx, .xls, .csv). No need to communicate the server to export the data in excel file.

Here we need to know about two famous angular libraries to export the data in excel file. 

1. xlsx is a library to generate excel file in different formats with graphical design. Click here xslx ✋ to know more information about this library.

2. file-saver is a library to save the files in client side. Click here file-saver ✋ to know more information about this library. 

The main advantage of using this approach is, it will improve the performance to your application.

In this post, We can see how to implement the export to excel functionality using xlsx library in Angular.

Step 1 :  To create new application using angular cli, open Visual Studio code tool and open the terminal (ctrl + shift + ` ). 

CLI command for creating application : ng new ExportExcelSample

Step 2 : We are done creating the application with the name of 'ExportExcelExample'. Now need to install the 'xlsx' library.

CLI command for install xlsx library : npm i xlsx

Step 3 :  Once done the installation of xlsx library in your application. We need to install the file-saver library to save the files in client side. 

CLI command for install file-saver library : npm i file-saver

Step 4 : After installation of both libraries. We need to check whether it is installed or not. To check the version. Open package.json and check the version. 

Step 5 : We are done the setup. Now, we will implement the functionality to export the data in excel.

App.component.html

HTML 
<p>Demo : Exporting an excel file of type .xslx !!! </p>
<p>Export as XLSX by clicking the below button</p>

<div style="width: 50%;">
  <button (click)="exportAsXLSX()" style="float: right;">Export to Excel</button>
  <br />
  <table style="width:100%;">
    <tr>
      <td>Id</td>
      <td>CarName</td>
      <td>Model</td>
      <td>Mileage</td>
      <td>Color</td>
    </tr>
    <tr *ngFor="let item of data">
      <td>{{item.Id}}</td>
      <td>{{item.CarName}}</td>
      <td>{{item.Model}}</td>
      <td>{{item.Mileage}}</td>
      <td>{{item.Color}}</td>
    </tr>
  </table>
</div>

App.component.scss

CSS 
td {
    border: 1px solid black;
}

App.component.ts

Typescript 
import { Component } from '@angular/core';
import { ExcelService } from '../app/excel.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ExportExcelSample';

  constructor(private excelService: ExcelService) { }

  data: any = [{
    Id: 1,
    CarName: 'Hummer',
    Model: 'H3',
    Mileage: '196321',
    Color: 'Pink'
  }, {
    Id: 2,
    CarName: 'Chevrolet',
    Model: '1500 Silverado',
    Mileage: '195310',
    Color: 'Blue'
  }, {
    Id: 3,
    CarName: 'Infiniti',
    Model: 'M',
    Mileage: '194846',
    Color: 'Puce'
  }];

  public exportAsXLSX(): void {
    this.excelService.exportAsExcelFile(this.data, 'sample');
  }
}

Step 6 :  Create a service file with the name of  'ExcelService', then add the code.

CLI command for create excel-service file : ng g service excel-service


excel.serivce.ts

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

const EXCEL_TYPE = `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;
charset=UTF-8';
const EXCEL_EXTENSION = '.xlsx';

@Injectable()
export class ExcelService {

    public exportAsExcelFile(json: any[], excelFileName: string): void {
        const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
        const workbook: XLSX.WorkBook = { Sheets: { data: worksheet }, 
                                                    SheetNames: ['data'] };
        const excelBuffer: any = XLSX.write(workbook, 
                                                { bookType: 'xlsx', type: 'array' });
        this.saveAsExcelFile(excelBuffer, excelFileName);
    }

    private saveAsExcelFile(buffer: any, fileName: string): void {
        const data: Blob = new Blob([buffer], {
            type: EXCEL_TYPE
        });
        FileSaver.saveAs(data, fileName + '_export_' + 
                            new Date().getTime() + EXCEL_EXTENSION);
    }
}

app.module.ts

Typescript 
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ExcelService } from './excel.service';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [ExcelService],
  bootstrap: [AppComponent]
})
export class AppModule { }

We are done the implementation, now we will run the project using cli command 'npm start' and will see the output.

Final Output looks like below.

Comments

Post a Comment

Popular posts from this blog

Send API POST Request in MS SQL Server

-
To send an API POST request in MS SQL Server using multipart/form-data, you can use the following T-SQL code: Example of content type : multipart/form-data SQL DECLARE @url VARCHAR(200) = 'https://example.com/api'; DECLARE @boundary VARCHAR(50) = '---------------------------' + CAST(NEWID() AS VARCHAR(36)); DECLARE @param1Name VARCHAR(50) = 'name'; DECLARE @param1Value VARCHAR(50) = 'John Doe'; DECLARE @param2Name VARCHAR(50) = 'email'; DECLARE @param2Value VARCHAR(50) = 'johndoe@example.com'; DECLARE @param3Name VARCHAR(50) = 'file'; DECLARE @param3Value VARBINARY(MAX) = (SELECT BulkColumn FROM OPENROWSET(BULK 'C:\path\to\file.txt', SINGLE_BLOB) AS x); DECLARE @param4Name VARCHAR(50) = 'description'; DECLARE @param4Value VARCHAR(200) = 'This is a sample file'; DECLARE @formData NVARCHAR(MAX) = N'--' + @boundary + CHAR(13) + CHAR(10) + ...
Read more

Create Custom Form Control for ng-select in Angular

-
Image
How to Create Custom Form Control in Angular  Why we create custom form control ? Normally, we used to create custom form control for re-usability.  The best advantage is that to add common functionality and features in this custom form control and extend the functionality as per our need and requirement.  And we can use everywhere into the application. But this example will tell you how to create custom form control to extend the functionality of  angular ng-select component.  We are adding a feature for this control, multi selection along with checkbox. Before that, we need to know what is the basic syntax of creating custom form control in angular. So, we start by implementing the ControlValueAccessor interface from @angular/forms into the component. This interface has three functions that need to be implemented and one optional functional. writeValue(obj: any): void { } registerOnChange(fn: any): void ...
Read more

How to Convert JSON Object to XML in C#

-
Image
JSON (Javascript Object Notation) is very popular for web development. It is light weight data-exchange format. Most of the applications are using this format to exchange the data for web applications. Sample JSON array of Objects :  {    "users" : [       { "firstName" : "John" ,  "lastName" : "Peter" },       { "firstName" : "Wills" ,  "lastName" : "Smith" }     ] } To use this format, need to install the Newtonsoft.json package. For more detail and version related information you can find it ✋here . Open the Visual Studio, go to the package manager console and type the below command. Basic Definition of XML (Extensible Markup Language  is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. Sample XML format :  < root >    < user >         ...
Read more

Tightly Coupled and Loosely Coupled in .NET Core with example

-
In .NET Core, tight coupling and loose coupling refer to the way software components are designed and connected to each other. Tight coupling in .NET Core means that two or more software components are highly dependent on each other, making it difficult to modify or replace one component without affecting the others. This can lead to maintenance and testing challenges, as well as reduced flexibility and scalability. Loose coupling in .NET Core, on the other hand, means that software components are designed to be independent and have minimal interdependence. This is achieved by using interfaces, dependency injection, and other techniques to reduce the direct dependencies between components. Loose coupling allows components to be more easily replaced, modified, or extended without affecting the rest of the system. Summary, loose coupling is generally preferred in .NET Core because it makes software more flexible, maintainable, and scalable. Advant...
Read more

Restrict Special Characters Using JavaScript By Copy,Paste

-
Restrict Special Characters using copy,paste events in JavaScript. Please follow these steps: 1. Create a textbox with the name of txtValidation and add event by the name of onpaste to that textbox. <asp:TextBox ID="txtValidation" runat="server" onpaste="return Validate(this.value);"></asp:TextBox> 2. Create a Function to that event.  <script type="text/javascript">         function Validate(Value) {             var pastedData = window.clipboardData.getData('Text');             var reg = /^[a-zA-Z0-9 ]*$/             if (!reg.test(pastedData)) {                 alert('Not Accept Special Characters');                 return false;             }         }     </script> Some of the spec...
Read more

Delete Empty Rows or Null Rows in Datatable in C#

-
How to Delete Empty Rows or Null Rows in Datatable Example:  In this application we can see how to Delete Empty Rows or Null Rows in Datatable. Mostly this issue comes from while uploading the excel(.xls,.xlsx) file data into your sql table through datatable in windows application or web application. In rare cases,we can see while getting data from excel to datatable it will copies the empty rows also. Below Code. C# public DataTable DeleteEmptyRowsFromDataTable(DataTable dt) { for (int i = dt.Rows.Count - 1; i >= 0; i--) { if (dt.Rows[i][1] == DBNull.Value) dt.Rows[i].Delete(); } dt.AcceptChanges(); return dt; }
Read more

Create Extension Method in typescript - String.IsNullOrEmpty()

-
Image
How to Create Extension Method using Typescript in Angular Application - String.IsNullOrEmpty() Step 1 : Create typings.d.ts (declaration file) in the application and declare the method in interface like below. HTML interface StringConstructor { isNullOrEmpty(value: string): boolean; } Step 2 : Create extension.ts file in the application and implement the method like below. HTML String.isNullOrEmpty = function (value: string): boolean { return value === undefined || value.trim() === '' || value === null; }; Step 3 : Usage of the Method in the component or class file. HTML import './extensions'; export class TestComponent implements OnInit { public ngOnInit(): void { let abc; console.log(String.isNullOrEmpty(abc)); } } Step 4 : Output like below.
Read more

Domain Driven Design (DDD) in .NET Core

-
Domain-Driven Design (DDD) is an approach to software development that emphasizes the importance of the business domain in the software design process. It is a set of principles and practices aimed at building software systems that are aligned with the business needs and requirements. The main idea behind DDD is to create a shared understanding of the domain model between the domain experts (business stakeholders) and the software developers. This is achieved by using a common language and a set of tools that allow for the domain model to be explicitly represented and manipulated in code. In DDD, the domain model is the central focus of the software design process. It is a representation of the core business concepts and rules that govern the behavior of the system. The domain model is expressed in code using object-oriented programming techniques, and it serves as the backbone of the software system. DDD also introduces several design patterns and ...
Read more

Configure the API gateway in Microservices Architecture with example in .NET Core

-
API Gateway in Microservices Architecture In a microservices architecture, an API Gateway is a layer that sits between clients and the microservices that provide the necessary functionalities. It acts as a single entry point for all client requests and handles communication between the clients and the underlying microservices. The API Gateway serves as a mediator between the client and the backend services. It receives incoming requests from clients and routes them to the appropriate microservice. It also handles authentication, authorization, load balancing, and other cross-cutting concerns such as rate limiting, caching, and request/response transformation. By providing a single entry point and a unified interface for clients, the API Gateway simplifies client access to the system and helps to decouple the client code from the underlying microservices. It also provides a central point for monitoring and logging of all the incoming requests, making it easier to identify and troublesho...
Read more

Javascript Hoisting

-
JavaScript hoisting is a mechanism where variable and function declarations are moved to the top of their respective scopes (either the global scope or function scope) during the compilation or interpretation phase, regardless of where they are declared in the source code. This means that even if a variable or function is declared later in the code, it can be used before its actual declaration. However, it is important to note that only the declaration is hoisted, not the initialization or assignment. In other words, if a variable is initialized after its declaration, its value will not be available until after the initialization. Similarly, if a function expression is used, it will not be hoisted, only function declarations are hoisted. JavaScript hoisting can have some advantages and disadvantages. Advantages: Flexibility : Hoisting provides developers with the flexibility to declare functions or variables anywhere in t...
Read more