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

在我的MVC3 Web application我有一个aspx主视图页面和一个部分视图页面。 我的table在Partial view 。 我也应用Table sorter和其他表的css 。 现在我想从这个表中导出数据到excel。 我尝试了很多方法，但没有为我工作。 任何人都可以帮助我…

我的部分观点代码是：

 <%@ 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 (ie 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和所有50logging结果的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"); }