javascript - AngularJS 中的 DataTable 导出按钮

Question

我使用带有导出按钮的 Angular-datatable 插件。

示例如下:http://l-lin.github.io/angular-datatables/#/withButtons

vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
    .withDOM('frtip')
    .withPaginationType('full_numbers')
    // Active Buttons extension
    .withButtons([
        'columnsToggle',
        'colvis',
        'copy',
        'print',
        'excel',
        {
            text: 'Some button',
            key: '1',
            action: function (e, dt, node, config) {
                alert('Button activated');
            }
        }
    ]);

我的问题是，当我尝试导出时，会显示隐藏的列。

我尝试找到仅导出可见列的解决方案，我在这里找到了解决方案 https://datatables.net/forums/discussion/3210/tabletools-how-to-hide-columns-when-exporting-copying

$('#list').dataTable({
  "sDom": 'T<"clear">lfrtip',
  "oTableTools": {
    "sSwfPath": "swf/copy_cvs_xls_pdf.swf", // setting path for swf file. Displays export buttons
    "aButtons": [{
      "sExtends": "copy",
      "mColumns": [0, 1, 2, 3, 4, 5] // Export settings for Copy to Clipboard
    }, {
      "sExtends": "csv",
      "mColumns": [0, 1, 2, 3, 4, 5] // Export settings for CSV file
    }, {
      "sExtends": "xls",
      "mColumns": [0, 1, 2, 3, 4, 5] // Export settings for Excel file
    }, {
      "sExtends": "pdf",
      "mColumns": [0, 1, 2, 3, 4, 5], // Export settings for PDF file
      "sPdfOrientation": "landscape"
    }],
  },

1. 如何将此选项添加到 Angular-datatable 插件中，以选择导出哪一列？
2. 如何更改导出文件的文件名(例如 Excel、pdf)？

Answer 1

24sharon给出的答案是正确的，但它不能完全满足您在csv文件下载中包含自定义字段的要求。这可以通过以下方式完成。

    $scope.dtOptions = DTOptionsBuilder.newOptions().withButtons([
                {extend:'csv',
                 title : '<What ever file name you need>',
                 text:'To Retry',
                 exportOptions: 
                    {columns:[1,2,3,4,5,6,7,8,9,10,11,12]}
                },
                {extend:'csv'}
]).withPaginationType('full_numbers').withOption('info', false).withOption('bFilter', true).withOption('paging', true);

在上面的示例中，我给它提供了自定义列和按钮的自定义名称。使用此功能，您可以仅允许您需要的列，最好的部分是这些列可以隐藏或可见。

注意:如果您按以下方式定义了列，则此方法有效

 $scope.dtColumnDefs = [
        DTColumnDefBuilder.newColumnDef(0),
        DTColumnDefBuilder.newColumnDef(1),        
        DTColumnDefBuilder.newColumnDef(2),
        DTColumnDefBuilder.newColumnDef(3),
        DTColumnDefBuilder.newColumnDef(4),
        DTColumnDefBuilder.newColumnDef(5).notVisible(),
        DTColumnDefBuilder.newColumnDef(6),
        DTColumnDefBuilder.newColumnDef(7).notVisible(),
        DTColumnDefBuilder.newColumnDef(8),
        DTColumnDefBuilder.newColumnDef(9),
        DTColumnDefBuilder.newColumnDef(10),
        DTColumnDefBuilder.newColumnDef(11),
        DTColumnDefBuilder.newColumnDef(12),
        DTColumnDefBuilder.newColumnDef(13)
      ];

我不确定这在其他场景中是否有效。如果这在其他情况下也有效，请尝试回复，它也可以帮助其他开发人员

引用:我使用 24sharon 给出的答案和带有选项“mColumns”的数据表上的一些文档找到了这个解决方案