Export DIV content to Excel using JavaScript in AngularJS

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Jun 10, 2019 01:57 AM
Forum: JavaScript
Answer: 1
Views: 17191
Sample Code: Download

Hi,

I have some content on div tag

after clciking of export excel button i need to export that data to excel

currently it was generating properly

probelem is that

if you can look at into screenshot

Filter values are disying on diffrenet row

my requirement is that display 3 input filter values on same row

and also at last filter also remove comma(,)

could you please check it and help me

    <script>
        function fnExcelReport() {
            var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
            tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';

            tab_text = tab_text + '<x:Name>Test Sheet</x:Name>';

            tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
            tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';

            tab_text = tab_text + "<table border='1px'>";
            tab_text = tab_text + $('#dvContainer1').html();
            tab_text = tab_text + '</table></body></html>';

            var data_type = 'data:application/vnd.ms-excel';

            var ua = window.navigator.userAgent;
            var msie = ua.indexOf("MSIE ");

            if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
                if (window.navigator.msSaveBlob) {
                    var blob = new Blob([tab_text], {
                        type: "application/csv;charset=utf-8;"
                    });
                    navigator.msSaveBlob(blob, 'Coupon.xls');
                }
            } else {
                $('#test').attr('href', data_type + ', ' + encodeURIComponent(tab_text));
                $('#test').attr('download', 'dynamicreport.xls');
            }

        }
    </script>

            <a href="#" id="test" @*ng-click="exportToExcel('#dvContainer1')"*@  onClick="javascript:fnExcelReport();" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-download-alt"></span>Export to Excel</a>

Could you please check it and help me

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 4

Reply
ANSWER
User: dharmendr
Replied: on Jun 10, 2019 07:55 AM
Modified: on Jun 11, 2019 05:12 AM
Report

Hi mahesh213,

Refer below code.

HTML

<html>
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller("MyController", ['$scope', '$http', function ($scope, $http) {
            $scope.items = [
                { CType: 'dropdown', ma1: 'Employee', ma: 'Mahesh Ready' },
                { CType: 'datepicker', ma3: 'From', Date: '04-06-2019' },
                { CType: 'datepicker', ma3: 'To', Date: '03-06-2019' }
            ];

            $scope.Employees = [{ EmpName: 'Mahesh Ready', FatherName: 'Narayana', DOB: '12/07/1995', DOJ: '02/01/2018', Amt: '19350'}];
        } ]);

        function fnExcelReport() {
            var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
            tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';
            tab_text = tab_text + '<x:Name>Test Sheet</x:Name>';
            tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
            tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';
            tab_text = tab_text + "<table border='1px'>";

            // Remove Dynamic hidden controls.
            var list = $('#dvContainer1').find('.ng-hide');
            for (var i = list.length - 1; 0 <= i; i--) {
                if (list[i] && list[i].parentElement) {
                    list[i].parentElement.removeChild(list[i]);
                }
            }

            // Getting dynamic controll values.
            var list = $('#dvContainer1').find('.dvItems');
            var values = "";
            for (var i = 0; i <= list.length - 1; i++) {
                if (list[i] && list[i].parentElement) {
                    values += $(list[i]).text().trim();
                }
            }
            for (var i = 0; i <= list.length - 1; i++) {
                if (i == 0) {
                    // Replace last comma and assign value.
                    $($('#dvContainer1').find('.dvItems')[i]).text(values.replace(/,\s*$/, ""));
                }
                else {
                    $($('#dvContainer1').find('.dvItems')[i]).text("");
                }
            }
            tab_text = tab_text + $('#dvContainer1').html();
            tab_text = tab_text + '</table></body></html>';
            var data_type = 'data:application/vnd.ms-excel';
            var ua = window.navigator.userAgent;
            var msie = ua.indexOf("MSIE ");

            if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
                if (window.navigator.msSaveBlob) {
                    var blob = new Blob([tab_text], {
                        type: "application/vnd.ms-excel;charset=utf-8;"
                    });
                    navigator.msSaveBlob(blob, 'Coupon.xls');
                }
            } else {
                window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
            }
        }
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div id="dvContainer1">
        <div style="padding-left: 30px; width: 70%; padding-top: 20px;">
            <div class="invoice-number-container">
                <label for="invoice-number" class="form-control">
                    Compnay Name:</label>Test Company
            </div>
            <div class="invoice-number-container">
                <label for="invoice-number" class="form-control">
                    Location Name:</label>Mumbai
            </div>
            Filter Records b/w Textboxes :
            <div ng-repeat="report in items" class="invoice-number-container dvItems">
                <div style="float: left">
                    <span style="display: inline" ng-show="report.CType.toLowerCase()=='dropdown'">{{report.ma1}}={{report.ma}},</span>
                    <span style="display: inline" ng-show="report.CType.toLowerCase()=='datepicker'">{{report.ma3}}={{report.Date | date:"dd-MM-yyyy"}},</span>
                </div>
            </div>
        </div>
        <br />
        <div>
            <div class="table-responsive ">
                <table border="0" cellspacing="0" cellpadding="0" ng-show="(Employees).length>0"
                    id="dvData" class="table table-bordered table-hover table-striped" style="margin-left: 20px;
                    margin-right: 20px;">
                    <thead>
                        <tr class="success">
                            <th ng-repeat="(header, value) in Employees[0]">{{header}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="row in Employees">
                            <td ng-repeat="cell in row">{{cell}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <br />
    <a href="#" class="btn btn-danger btn-sm" onclick="fnExcelReport();">Export PDF</a>
</body>
</html>

Screenshot

Exported Excel

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Export DIV content to Excel using JavaScript in AngularJS

Company

Explore

Follow us

Contact Us