C#/Javascript数据表导出为Excel和PDF

C#/Javascript datatable export to Excel and PDF

本文关键字:Excel PDF Javascript 数据表      更新时间:2023-09-26

我从一位前同事那里接手了一个C#实体框架项目。他用我不熟悉的方式用Javascript设置了几个表。我需要将这个数据表的内容导出到Excel和PDF文件中(每个文件都有单独的按钮)。我对使用C#、Javascript或JQuery持开放态度。

我最近一直在做ColdFusion,几乎一年都没有看过任何与.NET相关的东西,所以我正在努力复习,并找出我以前从未见过的东西,这让我头脑发热。

用于填充数据表的Javascript代码:

              $(document).ready(function () {
                  var active = true;
                  GetList(active);
              });
              function ChangeList() 
              {
                  GetList($("#ddlRiderType").val());
              }
              function GetList(isActive) {
                  $('#dataTable').dataTable({
                      "sDom": '<"top"lf>rt<"bottom"ip><"clear">',
                      "bAutoWidth": false,
                      "bProcessing": true,
                      "bSort": true,
                      "bDestroy": true,
                      "sPaginationType": "full_numbers",
                      "bServerSide": true,
                      "sAjaxSource": "Instructor.aspx/GetAllInstructors",
                      "fnServerData": function (sSource, aoData, fnCallback) {
                          var jsonData = "{jsonAOData : '" + JSON.stringify(aoData) + "', isActive: '" + isActive + "'}";
                          $.ajax({
                              //dataType: 'json', 
                              contentType: "application/json; charset=utf-8",
                              type: "POST",
                              url: sSource,
                              data: jsonData,
                              complete: function () { Init(); },
                              success: function (msg) {
                                  if (msg.d != null)
                                      fnCallback(msg.d);
                              },
                              error: function (XMLHttpRequest, textStatus, errorThrown) {
                                  ntfy_push("Error", ServerFail());
                              }
                          });
                      },
                      "aoColumnDefs": [
                { "sName": "Cipher",
                    "aTargets": [0],
                    "bVisible": false,
                    "bSearchable": false
                },
                { "sName": "firstName",
                    "aTargets": [1]
                },
                { "sName": "lastName",
                    "aTargets": [2]
                },
                { "sName": "org",
                    "aTargets": [10]
                },
                { "sName": "workPhone",
                    "aTargets": [4]
                },
                { "sName": "altPhone",
                    "aTargets": [5],
                    "bVisible": false,
                    "bSearchable": false
                },
                { "sName": "cellPhone",
                    "aTargets": [6],
                    "bVisible": false,
                    "bSearchable": false
                },
                 { "sName": "email",
                     "aTargets": [7]
                 },
                { "sName": "riderCoach",
                    "aTargets": [8],
                    "bVisible": false,
                    "bSearchable": false
                },
                { "sName": "rangeAid",
                    "aTargets": [9],
                    "bVisible": false,
                    "bSearchable": false
                },
                 { "sName": "admin",
                     "aTargets": [3]
                 },
                { "sName": "seniorInst",
                    "aTargets": [11],
                    "bVisible": false,
                    "bSearchable": false
                },
                { "sName": "dateAdded",
                    "aTargets": [12],
                    "bVisible": false,
                    "bSearchable": false
                },
                 { "sName": "dateMod",
                     "aTargets": [13],
                     "bVisible": false,
                     "bSearchable": false
                 },
                { "sName": "modBy",
                    "aTargets": [14],
                    "bVisible": false,
                    "bSearchable": false
                },
                { "sName": "active",
                    "aTargets": [15],
                    "bVisible": false,
                    "bSearchable": false
                },
                { "sName": "delete",
                    "aTargets": [16],
                    "bVisible": false,
                    "bSearchable": false
                },
                { "fnRender": function () {
                    return "Edit";
                },
                    "aTargets": [17]
                },
                { "fnRender": function () {
                    return "Delete";
                },
                    "aTargets": [18]
                }
            ],
                      "sDom": '<"toolbar">flrtip'
                  });
                  $("div.toolbar").html("<div class = 'tableOption'><img src = 'image/button/new-icon.png'/ alt= 'Add New Class' style = 'cursor:pointer' onclick = 'Show_New_Instructor()'></div>");
              }

用于标题的数据表

<table id = "dataTable">
<thead>
    <tr>
        <th>Instructor ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Admin</th>
        <th>Work Phone</th>
        <th>Alt Phone</th>
        <th>Cell Phone</th>
        <th>Email Address</th>
        <th>Rider Coach</th>
        <th>Range Aid</th>
        <th>Organ</th>
        <th>Senior Inst</th>
        <th>Date Added</th>
        <th>Date Modified</th>
        <th>Mod By</th>
        <th>Active</th>
        <th></th>
    </tr>
</thead>
<tbody></tbody>
</table>

Excel按钮:

PDF按钮:

我提前感谢你的帮助,如果这已经在某个地方的帖子中了,我很抱歉忽略了它。

由于您对使用这三个平台中的任何一个都持开放态度,因此您可能需要检查Office互操作性,以便在C#代码中最大限度地使用MS Office

http://msdn.microsoft.com/en-ca/library/dd264733.aspx