Click here to Skip to main content
14,691,039 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
i want to export angular table to xls.
here is my code:-

<div id="exportable" class="table-responsive" style="overflow: scroll; width:100%; height:700px;">
    <br />

    <table class="table" id="datatable">
                @* <th>elapsed_time</th>*@
                <th style="display: none">ticket_id</th>
                <th style="display: none">sub_ticket_id</th>
                <th ng-click="sort('ticket')">Ticket Id</th>
                <th ng-click="sort('status')">Status</th>
                <th style="display: none">reference_ticket_id</th>
                <th ng-click="sort('ticket_type_name')">Ticket Type</th>
                <th ng-click="sort('request_type')">Type</th>
                <th ng-click="sort('request_sub_type')">Item</th>
                <th ng-click="sort('subject')">Reason</th>
                <th ng-click="sort('priority')">Priority</th>
                <th ng-click="sort('elapsed_time')">Elapsed Time</th>
                <th ng-click="sort('reference_ticket')">Ref. Ticket Id</th>
                <th style="display: none">Requires Closure</th>
                <th ng-click="sort('ticket')">Created Date</th>
                <th style="display: none">Referred By</th>
                <th style="display: none">Mode Of Complaint</th>

                <th>Show details</th>
            <tr ng-repeat="Data in MyTicketsList |filter : Search | orderBy:sortKey:reverse">

                <td style="display: none" class="center">{{Data.ticket_id}}</td>
                <td style="display: none" class="center">{{Data.sub_ticket_id}}</td>
                <td class="center">{{Data.ticket}}</td>
                <td class="center">{{Data.status}}</td>
                <td style="display: none" class="center">{{Data.reference_ticket_id}}</td>
                <td class="center">{{Data.ticket_type_name}}</td>
                <td class="center">{{Data.department_name}}</td>
                <td class="center">{{Data.request_type}}</td>
                <td class="center">{{Data.request_sub_type}}</td>
                <td class="center">{{Data.subject}}</td>
                <td class="center">{{Data.priority}}</td>
                <td class="center">{{Data.elapsed_time}}</td>
                <td class="center">{{Data.reference_ticket}}</td>
                <td style="display: none" class="center">{{Data.requires_closure}}</td>
                <td class="center">{{Data.created_date}}</td>
                <td style="display: none" class="center">{{Data.referred_by}}</td>
                <td style="display: none" class="center">{{Data.modeOfComplaint}}</td>

                    <a href="#myModal" class="Edit_b" data-toggle="modal" ng-click="ShowConversations(Data)">Show</a>

i want to hide those column in which "display:none".

What I have tried:

<script async="" src=""></script>
    function ExcelExport() {
        var blob = new Blob([document.getElementById('exportable').innerHTML], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",


        saveAs(blob, "Report.xls");

i am trying this code but it gives all column in xls. can someone suggest me a solution to export only selected columns..
Updated 24-Sep-19 9:21am

1 solution

i am trying this code but it gives all column in xls. can someone suggest me a solution to export only selected columns..
That is because you are passing down the entire HTML tree to be saved,
new Blob([document.getElementById('exportable').innerHTML], {
A solution for this would be that you first filter the content and then pass it down. You can iterate over the collection and then remove the elements where the display property in style attribute is none.

Maybe a quick jQuery can help you here, this Stack Overflow thread shares a similar code for jQuery, attributes - jQuery get elements without display="none" - Stack Overflow[^].

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900