Javascript AngularJS中的DataTable导出按钮

我使用带有导出按钮的angular datatable插件

示例如下：

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

我试图找到只导出可见列的解决方案，我在这里找到了解决方案

$（'#list'）。数据表({
“sDom”：“Tlfrtip”，
“可旋转工具”：{
“sSwfPath”：“swf/copy_cvs_xls_pdf.swf”，//设置swf文件的路径。显示导出按钮
“阿布顿”：[{
“复制”，
“mColumns:[0,1,2,3,4,5]//导出复制到剪贴板的设置
}, {
“性倾向”：“csv”，
“mColumns:[0,1,2,3,4,5]//导出CSV文件的设置
}, {
“性倾向”：“xls”，
“mColumns:[0,1,2,3,4,5]//导出Excel文件的设置
}, {
“性倾向”：“pdf”，
“mColumns:[0,1,2,3,4,5]，//导出PDF文件的设置
“方向”：“景观”
}],
},

如何将此选项添加到angular datatable插件中，以选择导出哪个列

如何更改导出文件（如excel、pdf）的文件名

---

这是我遵循的代码，它是有效的。这是文件名更改（第二个问题）。 请让我知道，如果你有任何问题与以下

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}
    }
]

---

谢谢，我所做的唯一更改是将其添加到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'
        }
    }
]);

---

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

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

---

Ref：我使用24sharon给出的答案找到了这个解决方案，数据表上有几个文档，选项为'mColumns'

和

列：'：visible'

也解决了第一个问题。但是您应该更好地格式化代码，逗号缺失。

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

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