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

謝謝，我做的唯一改變是將它添加到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'
        }
    }
]);

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

我不確定這是否適用於其他場景。 請嘗試回復，如果這在其他情況下也有效，它也可以幫助其他開發者

參考：我找到了這個解決方案，使用了24sharon和幾個帶有選項'mColumns'的數據表的文檔給出的答案

Answer 3

這是我遵循的代碼，它的工作原理。 這是為了更改文件名（第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}
    }
]