DataTable导出AngularJS中的按钮

Question

我使用有导出按钮的角数据表插件.

这里的例子：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. 如何将此选项添加到角数据表插件中，以选择哪一列导出？
2. 如何更改导出文件的文件名(如excel，pdf)？

Answer 1

下面是我遵循的代码，它很有效。这是为文件名的更改(第二个问题)。如果您对下列事项有任何意见，请告诉我。

buttons: [
    {
        extend: "excelHtml5",
        fileName:  "CustomFileName" + ".xlsx",
        exportOptions: {
            columns: ':visible'
        },
        //CharSet: "utf8",
        exportData: { decodeEntities: true }
    },
    {
        extend: "csvHtml5",
        fileName:  "CustomFileName" + ".xlsx",
        exportOptions: {
            columns: ':visible'
        },
        exportData: {decodeEntities:true}
    }
]

Answer 2

由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)
      ];

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

Ref:我使用24sharon给出的答案找到了这个解决方案，并且很少有关于带有'mColumns‘选项的可数据的文档

Answer 3

谢谢，我所做的唯一改变就是将它添加到角数据表选项中。

$scope.dtOptions = DTOptionsBuilder.fromFnPromise(function() {

    //...
})
.withDataProp('data')
.withOption('initComplete', function(){
    $scope.loading = false;
})
.withButtons([
    {
        extend: "excelHtml5",
        filename:  "Data_Analysis",
        title:"Data Analysis Report",
        exportOptions: {
            columns: ':visible'
        },
        //CharSet: "utf8",
        exportData: { decodeEntities: true }
    },
    {
        extend: "csvHtml5",
        fileName:  "Data_Analysis",
        exportOptions: {
            columns: ':visible'
        },
        exportData: {decodeEntities:true}
    },
    {
        extend: "pdfHtml5",
        fileName:  "Data_Analysis",
        title:"Data Analysis Report",
        exportOptions: {
            columns: ':visible'
        },
        exportData: {decodeEntities:true}
    },
    {
        extend: 'print',
        //text: 'Print current page',
        autoPrint: false,
        exportOptions: {
            columns: ':visible'
        }
    }
]);