Export DIV content to Excel using JavaScript in AngularJS

Last Reply 6 days ago By dharmendr

Posted 6 days ago

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

You are viewing reply posted by: dharmendr 6 days ago.
Posted 6 days ago Modified on 5 days ago

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