Export table to Excel file using Angularjs in asp.net MVC - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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.


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.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon