Question

我希望使用数据表在网页上提供导出功能。我的表结构如下：

<table id="data-table" class="display table" width="100%">
  <thead>
    <tr>
      <th colspan="4" class="center-align solid-left-border" style="border-bottom: none; text-decoration: underline; text-transform: uppercase; padding: 5px 18px;">
        Tier 2 Contributions Report
      </th>
    </tr>

    <tr>
      <th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; font-weight: normal; padding: 5px 18px; font-size: 12.5px">
        Employer's FIle No/Registration No:
      </th>

      <th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;">
        <%= company.getSSNITRegistration() || '-' %>
      </th>
    </tr>

    <tr>
      <th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; padding: 5px 18px; font-size: 12.5px;">
        Name of Employer:
      </th>

      <th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;">
        <%= company.getName() || '-' %>
      </th>
    </tr>

    <tr>
      <th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; padding: 5px 18px; font-size: 12.5px;">
        Address of Employer:
      </th>

      <th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;">
        <%= company.getAddress() || '-' %>
      </th>
    </tr>


    <tr>
      <th colspan="4" style="border-bottom: none;"></th>
    </tr>

    <tr>
      <th class="left-align">Social Sec. No.</th>
      <th class="left-align">Full Name</th>
      <th class="center-align">Basic Salary</th>
      <th class="right-align">Contribution (5%)</th>
    </tr>

  </thead>

  <tfoot>
   <tr>
     <th colspan="2" class="left-align">Totals</th>
     <th class="center-align"><%= addCommas(totals.basicSalary) %></th>
     <th class="right-align"><%= addCommas(totals.contribution) %></th>
   </tr>
  </tfoot>

  <tbody>   
    <% employees.forEach(function(employee) { %>
      <tr>
        <td class="left-align"><%= employee.ssnitNumber %></td>
        <td class="left-align"><%= employee.lastName + ', ' + employee.firstName + ' ' + employee.otherNames%></td>
        <td class="center-align"><%= addCommas(employee.basicSalary) %></td>
        <td class="right-align"><%= addCommas(employee.contribution) %></td>
      </tr>
    <% }) %>
  </tbody>
</table>

和js：

$('#data-table').DataTable( {
  "bPaginate": true,
  "bLengthChange": true,
  "bFilter": true,
  "bSort": false,
  "bInfo": true,
  "bAutoWidth": false,
  "dom": 'Bfrtip',
  "buttons": [
    'copy', 'csv', 'excel', 'pdf', 'print'
  ]

});

虽然导出工作，但由于某种原因，只导出标题的最后部分：

    <tr>
      <th class="left-align">Social Sec. No.</th>
      <th class="left-align">Full Name</th>
      <th class="center-align">Basic Salary</th>
      <th class="right-align">Contribution (5%)</th>
    </tr>

我尝试过使用exportOptions，但没有太多运气，而且默认情况下会导出标题。

我感谢任何帮助，谢谢：）

Answer 1

要回答您的问题，可以使用数据表导出功能导出任何数据（自定义文本，图像），并在声明中进行更改，如下所示。

table = $('#example').DataTable( {
    "bProcessing"   :   true,
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'pdfHtml5',
            customize: function ( doc ) {
                doc.content.splice( 0, 0, {
                    text: "Add your custom data here"
                } );
            }
        },
        'copyHtml5',
        'excelHtml5',
        'csvHtml5'
    ]
} );

要使这些DOM元素起作用，我们需要包含以下样式表和脚本

//Stylesheet
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">

//Scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>

注意：正如您在此示例中要求的自定义标题导出所示，如何传递我们在“文本”部分中提供的自定义数据（它不会自动导出您的额外标题）。

因此，请删除您的第一个标题，例如“第2层贡献报告”，并将它们保留在表格定义之外，并将其值添加到“文本”部分

我已经创建了小提琴https://jsfiddle.net/Prakash_Thete/rbunuv9b/同样请看一下。

DataTables Excel导出后缺少标题数据

1 个答案: