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”的数据表上的少数文档找到了这个解决方案

Answer 2

这是我遵循的代码，它有效。这是用于文件名更改（第二个问题）。 如果您对以下内容有任何问题，请告诉我。

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 3

谢谢，我所做的唯一更改是将其添加到 angular-datatable 选项中

$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'
        }
    }
]);