数据表删除导出到 pdf 和 excel 的列

Posted 2023-05-09

技术标签:

【中文标题】数据表删除导出到 pdf 和 excel 的列【英文标题】：datatable remove column on export to pdf and excel 【发布时间】：2021-10-24 00:56:42 【问题描述】：

在导出到 pdf、excel 之前删除列时出现问题。第二个问题是，由于此列，列的反向无法正常工作这是我使用的代码

$(document).ready(function()
            var arrayCol = new Array();
            var table = $('#example').DataTable(
                dom: 'B<"top"iflp<"clear">>rt<"bottom"ip<"clear">>',
                initComplete:function (  ) 
                    var len = this.api().columns().count();
                    var array =  Array.from(Array(len).keys());
                    arrayCol = array.reverse();
                  ,
            buttons: [
       
        extend: 'pdf',
        text: 'To PDF',
        exportOptions: 
          rows: function ( idx, data, node ) 
            return data.reverse();
          ,
          format: 
          columns: ':visible:not(.not-export-col)', 
            header: function ( data, idx, node ) 
              var headers = $('#example').DataTable().table().header();
              var reversedHeaders = headers.innerText.split('\t').reverse();
              return reversedHeaders[idx];
            
          
        
      ,
                
        extend: 'excel',
        text: 'exel',
        exportOptions: 
        columns: ':visible:not(.not-export-col)', 
          rows: function ( idx, data, node ) 
            return data.reverse();
          ,
          format: 
            header: function ( data, idx, node ) 
              var headers = $('#example').DataTable().table().header();
              var reversedHeaders = headers.innerText.split('\t').reverse();
              return reversedHeaders[idx];
            
          
        
      
    ]
                );
        );

here 是一个活生生的例子

【问题讨论】：

【参考方案1】：

您可以扩展使用 here 的方法来处理抑制一个或多个您不想导出的列的额外要求。

您对列选择器的使用效果很好：

columns: ':visible:not(.not-export-col)

为了构建我们要导出的标头列表，可以使用initComplete 函数（因此我们只执行此过程一次）。

我们还可以使用initComplete 函数来构建我们不想想要导出的列索引数组：

var ignorePositions = []; // column indexes of data NOT to be exported
var reversedHeaders = []; // with "not-export" headings removed

功能：

initComplete:function (  ) 
  var thead = $( '#example' ).DataTable().table().header();
  var tds = $( thead ).find( 'th' ).each(function( index ) 
    if ( ! $( this ).hasClass('not-export-col') ) 
      reversedHeaders.push( $( this ).text() );
     else 
      ignorePositions.push(index);
    
  );
  reversedHeaders.reverse(); // to give us the export order we want
  ignorePositions.reverse(); // reversed for when we splice() - see below

上面的代码填充了两个数组：

reversedHeaders - 包含我们将导出的那些列的标题列表（反向）。 ignorePositions - 包含要忽略的列索引列表。在我们的示例中，唯一这样的列是最后一列（索引 6）。

那么我们就可以在修改后的exportOptions代码中使用上面的数组了：

exportOptions: 
  rows: function ( idx, data, node ) 
    var keepRowData = [];
    // we splice to remove those data fields we do not want to export:
    ignorePositions.forEach(idx => data.splice(idx, 1) );
      return data.reverse();
  ,
  columns: ':visible:not(.not-export-col)',
  format:  
    header: function ( data, idx, node ) 
      return reversedHeaders[idx];

唯一棘手的部分是需要使用splice 直接更改原始data 数组。这会从原始数据数组中删除每个不需要的元素，而不创建新的数据数组。

把它们放在一起：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

  <!-- buttons -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css"/> 
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.colVis.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.flash.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js"></script>

</head>

<body>

<div class="container">
      <table id="example" class="display nowrap" >
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th class="not-export-col">opr</th>
          </tr>
        </thead>
<!--
        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th class="not-export-col">opr</th>
          </tr>
        </tfoot>
-->
        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td><a href="www.google.com"><i class="wb-edit"></i></a></td>
          </tr>
<!--
          <tr>
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
            <td><a href="www.google.com"><span class="iconify" data-icon="fa:edit"></span></a></td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
            <td><a href="www.google.com"><span class="iconify" data-icon="fa:edit"></span></a></td>
          </tr>
          <tr>
            <td>Cedric Kelly</td>
            <td>Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$3,600</td>
            <td><a href="www.google.com"><span class="iconify" data-icon="fa:edit"></span></a></td>
          </tr>
          <tr>
            <td>Jenna Elliott</td>
            <td>Financial Controller</td>
            <td>Edinburgh</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$5,300</td>
            <td><a href="www.google.com"><span class="iconify" data-icon="fa:edit"></span></a></td>
          </tr>
          <tr>
            <td>Donna Snider</td>
            <td>System Architect</td>
            <td>New York</td>
            <td>27</td>
            <td>2011/01/25</td>
            <td>$3,120</td>
            <td><a href="www.google.com"><span class="iconify" data-icon="fa:edit"></span></a></td>
          </tr>
-->
        </tbody>
      </table>
    </div>
<script>

$(document).ready(function() 
  var ignorePositions = []; // column indexes of data NOT to be exported
  var reversedHeaders = []; // with "not-export" headings removed

  var table = $('#example').DataTable( 
    dom: 'B<"top"iflp<"clear">>rt<"bottom"ip<"clear">>',
    initComplete:function (  ) 
      var thead = $( '#example' ).DataTable().table().header();
      var tds = $( thead ).find( 'th' ).each(function( index ) 
        if ( ! $( this ).hasClass('not-export-col') ) 
          reversedHeaders.push( $( this ).text() );
         else 
          ignorePositions.push(index);
        
      );
      reversedHeaders.reverse(); // to give us the export order we want
      ignorePositions.reverse(); // reversed for when we splice() - see below
    ,
    buttons: [
       
        extend: 'pdf',
        text: 'To PDF',
        exportOptions: 
          rows: function ( idx, data, node ) 
            var keepRowData = [];
            // we splice to remove those data fields we do not want to export:
            ignorePositions.forEach(idx => data.splice(idx, 1) );
            return data.reverse();
          ,
          columns: ':visible:not(.not-export-col)',
          format:  
            header: function ( data, idx, node ) 
              return reversedHeaders[idx];
            
          
        
      
    ]
   );
 );

</script>

</body>
</html>

表格数据，如下图:

像这样导出为 PDF：

最后的笔记：

我只在上面的代码中实现了 PDF 按钮。 Excel 按钮代码也需要添加，但应该相同。

我在我的代码中注释掉了 HTML 表的 <tfoot> 部分。我认为这意味着您还需要在您的实现中添加footer: function() ... ，以匹配header: function() ... 代码。我假设如下（但我没有对此进行测试）：

format:  
  header: function ( data, idx, node ) 
    return reversedHeaders[idx];
  ,
  footer: function ( data, idx, node ) 
    return reversedHeaders[idx];

更新

我看到了烦人的警报。这是由我的代码引起的，它改变了数据行的长度（当它拼接出一个元素时）。

第二个问题是，一旦反转了一行，它就会保持反转 - 因此，在下一次导出时，导出的数据的顺序是错误的。

解决这两个问题很麻烦，而且我提出的解决方案是有限的：

我的解决方案假设您只想隐藏最后一列。

它还依赖于您能够检测到何时反转行 - 在我的情况下，这是通过检查行数据的最终位置中的特定值来完成的 - 同样，这不是一个非常可靠的方法 - 但它是我目前能想到的唯一方法。

这是更新后的代码：

$(document).ready(function() 
  var exportPositions = []; // column indexes of data NOT to be exported
  var ignorePositions = []; // column indexes of data NOT to be exported
  var reversedHeaders = []; // with "not-export" headings removed

  var table = $('#example').DataTable( 
    dom: 'B<"top"iflp<"clear">>rt<"bottom"ip<"clear">>',
    initComplete:function (  ) 
      var thead = $( '#example' ).DataTable().table().header();
      var tds = $( thead ).find( 'th' ).each(function( index ) 
        if ( ! $( this ).hasClass('not-export-col') ) 
          reversedHeaders.push( $( this ).text() );
          exportPositions.push(index);
         else 
          ignorePositions.push(index);
        
      );
      reversedHeaders.reverse(); // to give us the export order we want
      reversedHeaders.push('');
      ignorePositions.reverse(); // reversed for when we splice() - see below
    ,
    buttons: [
       
        extend: 'pdf',
        text: 'To PDF',
        exportOptions: 
          rows: function ( idx, data, node ) 
            if (data[data.length - 1] === '~') 
              data.reverse(); // un-reverse an already reversed record
              data.push(data.splice(0, 1)[0]); // move first element to end of the array
            
            // we splice to remove those data fields we do not want to export:
            ignorePositions.forEach(idx => 
              data.splice(idx, 1);
             );
            data.reverse();
            ignorePositions.forEach(idx => 
              data.push('~'); // pad the array back to its original length
             );
            return data;
          ,
          columns: exportPositions, // here we use the array we built earlier
          format:  
            header: function ( data, idx, node ) 
              return reversedHeaders[idx];
            
          
        
      
    ]
   );
 );

如果您的实际实现需要隐藏多个列，那么这种方法可能不适合您。如果我对更强大的解决方案有任何想法，我会更新答案。

【讨论】：

第一次导出效果很好，第二次导出不行，出现烦人的提示怎么解决我明白你的意思 - 我已经提供了一些更新。

以上是关于数据表删除导出到 pdf 和 excel 的列的主要内容，如果未能解决你的问题，请参考以下文章

Kendo UI：在导出到 excel 和 pdf 期间操作网格列

jquery datatable如何在导出到excel pdf时从标题中删除下拉过滤器选择值

从 T-SQL 导出到 Excel 的问题，包括列名和未导出的列上的排序

PDF表单导出至excel表内操作步骤

用于 PDF 导出、Excel 导出和打印的 ReactJS 组件

JQuery Datatables 表格工具，删除 PDF 导出