将Aspx视图页面HTML表格数据导出到Excel文件

Question

在我的MVC3 Web application中，我有一个aspx主视图页面和一个部分视图页面。我的table位于Partial view。我还在其中应用了Table sorter和其他表格css。现在我想将此表中的数据导出为ex​​cel。我尝试了很多方法，但它对我没用。任何人都可以帮助我......

我的部分视图代码是：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<ApricaCRMEvent.Models.CRM.DatabaseEntities.CRM_Doctor_Request>>" %>

<!-- for table sorter and table Pager -->
<script src="../../__jquery.tablesorter/jquery.tablesorter.js" type="text/javascript"></script>
<script src="../../__jquery.tablesorter/jquery.tablesorter.widgets.js" type="text/javascript"></script>
<script src="../../__jquery.tablesorter/jquery.tablesorter.pager.js" type="text/javascript"></script>

<script type ="text/javascript" id="js">
    $(function () {

        // **********************************
        //  Description of ALL pager options
        // **********************************
        var pagerOptions = {

            // target the pager markup - see the HTML block below
            container: $(".pager"),

            // use this url format "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
            ajaxUrl: null,

            // process ajax so that the data object is returned along with the total number of rows
            // example: { "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }], "total_rows" : 100 }
            ajaxProcessing: function (ajax) {
                if (ajax && ajax.hasOwnProperty('data')) {
                    // return [ "data", "total_rows" ];
                    return [ajax.data, ajax.total_rows];
                }
            },

            // output string - default is '{page}/{totalPages}'
            // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
            output: '{startRow} to {endRow} ({totalRows})',

            // apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
            updateArrows: true,

            // starting page of the pager (zero based index)
            page: 0,

            // Number of visible rows - default is 10
            size: 10,

            // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
            // table row set to a height to compensate; default is false
            fixedHeight: true,

            // remove rows from the table to speed up the sort of large tables.
            // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
            removeRows: false,

            // css class names of pager arrows
            cssNext: '.next', // next page arrow
            cssPrev: '.prev', // previous page arrow
            cssFirst: '.first', // go to first page arrow
            cssLast: '.last', // go to last page arrow
            cssGoto: '.gotoPage', // select dropdown to allow choosing a page

            cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
            cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option

            // class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
            cssDisabled: 'disabled' // Note there is no period "." in front of this class name
        };


        // Extend the themes to change any of the default class names ** NEW **
        $.extend($.tablesorter.themes.jui, {
            // change default jQuery uitheme icons - find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name)
            table: 'ui-widget ui-widget-content ui-corner-all', // table classes
            header: 'ui-widget-header ui-corner-all ui-state-default', // header classes
            footerRow: '',
            footerCells: '',
            icons: 'ui-icon', // icon class added to the <i> in the header
            sortNone: 'ui-icon-carat-2-n-s',
            sortAsc: 'ui-icon-carat-1-n',
            sortDesc: 'ui-icon-carat-1-s',
            active: 'ui-state-active', // applied when column is sorted
            hover: 'ui-state-hover',  // hover class
            filterRow: '',
            even: 'ui-widget-content', // odd row zebra striping
            odd: 'ui-widget-content'   // even row zebra striping
        });

        // call the tablesorter plugin and apply the ui theme widget
        $("table").tablesorter({

            theme: 'jui', // theme "jui" and "bootstrap" override the uitheme widget option in v2.7+

            headerTemplate: '{content} {icon}', // needed to add icon for jui theme

            // widget code now contained in the jquery.tablesorter.widgets.js file
            widgets: ['uitheme', 'zebra'],

            widgetOptions: {
                // zebra striping class names - the uitheme widget adds the class names defined in
                // $.tablesorter.themes to the zebra widget class names
                zebra: ["even", "odd"]

                // set the uitheme widget to use the jQuery UI theme class names
                // ** this is now optional, and will be overridden if the theme name exists in $.tablesorter.themes **
                // uitheme : 'jui'
            }

        })
        // bind to pager events
        // *********************
        .bind('pagerChange pagerComplete pagerInitialized pageMoved', function (e, c) {
            var msg = '"</span> event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
                ' page <span class="typ">' + (c.page + 1) + '/' + c.totalPages + '</span>';
            $('#display')
                .append('<li><span class="str">"' + e.type + msg + '</li>')
                .find('li:first').remove();
        })

        // initialize the pager plugin
        // ****************************
        .tablesorterPager(pagerOptions);
    });
</script>
<!-- end table sorter and table Pager -->

<table class="tablesorter" id="ResultList">
<thead id="headers">    
    <tr>
        <th>
            CRMId
        </th>
        <th>
            Territory
        </th>
        <th>
            Doctor(MDLNo)
        </th>
        <th>
            Requester 
        </th>
        <th>
            Suggester 
        </th>
        <th>
            Division 
        </th>
        <th>
            Estimated
        </th>
        <th>
            Actual
        </th>
        <th>
            Priority
        </th>
        <th>
            Notation
        </th>
        <th>
            Deadline
        </th>
        <th>
            ExecutedDate
        </th>
        <th>
            CreatedDate
        </th>
        <th>
            CRM State
        </th>
        <th>
            Service State
        </th>
    </tr>
</thead>
<tbody>
<% foreach (var item in Model) { %>
    <tr>
        <td>
            <%: Html.ActionLink(((int)item.Id).ToString(), "DetailsCRMRequest", "CRM", new { Id = item.Id, controllerName = "FilterCRMRequest", actionName = "Index" }, null)%>
            <%--<%: Html.DisplayFor(modelItem => item.Id) %>--%>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Territory_Name) %>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Request_For_Name) %> (<%: Html.DisplayFor(modelItem => item.Request_For_Id) %>)
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Requester_Name) %>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Suggester_Name) %>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Division_Name) %>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Estimated_Amount) %>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Actual_Amount) %>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Compute_Priority) %>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.CRM_Notation_Name) %>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Deadline) %>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Executed_Date) %>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Date_Created) %>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Compute_CRM_State) %>
        </td>
        <td>
            <%: Html.DisplayFor(modelItem => item.Compute_Service_State) %>
        </td>
    </tr>
<% } %>

</tbody>
<tfoot>
<tr class="pager" align="center">
    <td colspan="15">
        <img src="../../Content/images/first.png" class="first" alt="First" />
        <img src="../../Content/images/prev.png" class="prev" alt="Prev" />
        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
        <img src="../../Content/images/next.png" class="next" alt="Next" />
        <img src="../../Content/images/last.png" class="last" alt="Last" />
        <select class="pagesize" title="Select page size">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
        </select>
        <select class="gotoPage" title="Select page number"></select>
    </td>
</tr>
</tfoot>
</table>

我已经尝试过这个：这个有用，但是我给了Excel文件中的css和来自所有50个记录结果的5个td字段......

function Export(e) {
        window.open('data:application/vnd.ms-excel,' + $('#ResultList').html());
        e.preventDefault();
    }

并且：它完全不起作用......

function Export() {
        alert("called function");
        str = "";

        var myTableHead = document.getElementById('headers');
        var rowCount = myTableHead.rows.length;
        var colCount = myTableHead.getElementsByTagName("tr")[0].getElementsByTagName("th").length;

        var ExcelApp = new ActiveXObject("Excel.Application");
        var ExcelSheet = new ActiveXObject("Excel.Sheet");
        ExcelSheet.Application.Visible = true;
        alert("before for");
        for (var i = 0; i < rowCount; i++) {
            for (var j = 0; j < colCount; j++) {
                str = myTableHead.getElementsByTagName("tr")[i].getElementsByTagName("th")[j].innerHTML;
                ExcelSheet.ActiveSheet.Cells(i + 1, j + 1).Value = str;
            }
        }
        alert("done");
    }