Export table to Excel file using Angularjs in asp.net MVC

In this article I am going to explain how to export table to Excel file using Angularjs in asp.net MVC.

In previous article I have explained how to import XML file data into Sql tableusing Sqlbulkcopy in asp.net, how to import xml file data into sql table usingstore procedure in asp.net and how to create stacked and multi series columnchart using Google chart API in asp.net MVC.

Description:

When I am working on project I have got a requirement to export the table to excel file. I have got a simple solution to fulfill this requirement. I have found FileSaver.js.

Implementation:

First we start I want to tell you I am suing data first approach. I have created a table Employee and insert some dummy record into it.

Model

public partial class Employee

    {

        public int Id { get; set; }

        public string Name { get; set; }

        public Nullable<int> Phone { get; set; }

        public Nullable<int> Salary { get; set; }

        public string Department { get; set; }

        public string ImagePath { get; set; }

        public string EmailId { get; set; }

    }

Add Controller

Add an empty controller to project. Create a josn action to get data from database.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MVC_Project.Models;

namespace MVC_Project.Controllers

{

    public class DemoController : Controller

    {

        //

        // GET: /Demo/

        DemoEntities1 db = new DemoEntities1();

        public ActionResult Index()

        {

            return View();

        }

        public JsonResult GetEmployee()

        {

            var emp = db.Employees.ToList();

            return Json(emp, JsonRequestBehavior.AllowGet);

        }

       

    }

}

Add View

Now add a view for index action. Don’t forget to add CDN of Filesaver js.

Complete code of view (index.cshtml):

@{

    ViewBag.Title = "AngularJs Tutorial";

}

<style>

</style>

<h2>AngularJs Tutorial : Export to Excel</h2>

<div ng-app="mvcapp" ng-controller="DemoController" >  

        <input type="button" value="Export to Excel" id="btnexport" ng-click="exportData()" />

    <div id="export">

        <table>

            <tr>

                <th>S.No</th>

                <th>

                    Name

                </th>

                <th>

                    Phone

                </th>

                <th>

                    Department

                </th>

                <th>

                    Salary

                </th>

                <th>

                    Email

                </th>

            </tr>

            <tr ng-repeat="empModel in employees">

                <td>{{empModel.Id}}</td>

                <td>{{empModel.Name }}</td>

                <td>{{empModel.Phone }}</td>

                <td>{{empModel.Department}}</td>

                <td>{{empModel.Salary }}</td>

                <td>{{empModel.EmailId ||'Email not available'}}</td>

            </tr>

        </table>

    </div>

    </div>

<style>

    input[type=button][disabled=disabled] {

        opacity: 0.65;

        cursor: not-allowed;

    }

    table tr th {

        padding: 10px 30px;

    }

    table tr td {

        padding: 10px 30px;

    }

</style>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>

<script src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>

<script>

    var angular = angular.module('mvcapp', []);

    angular.controller('DemoController', function ($scope, $http) {

        GetAllData();

        $scope.isDisabledupdate = true;

        //Get All Employee

        function GetAllData() {

            $http.get('/Demo/GetEmployee').success(function (data) {

                $scope.employees = data;

            });

        };

        $scope.exportData = function () {

            var blob = new Blob([document.getElementById('export').innerHTML], {

                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"

            });

            saveAs(blob, "Employeereport.xls");

        };

    

    });

</script>

Build the project and run.