Export table to Excel file using Angularjs in asp.net MVC | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF 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.

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget