DataTables插件导出PDF时动态配置逆序列不生效问题求助

• DataTables 配置项在初始化阶段就会完成求值，buttons.exportOptions.columns 会在表格初始化时就读取传入的 arrayCol 值，而 initComplete 回调是表格完全初始化、数据加载渲染完成后才触发，此时你给 arrayCol 赋的逆序数组，已经不会更新到已经初始化完成的按钮配置里了。
• 调试时看到的 arrayCol 是 initComplete 执行后的最终值，但按钮配置实际引用的是初始化时的空数组，导出时自然没有列数据。硬编码的数组在初始化时就有明确值，所以能正常生效。

根据你的场景可以选择以下任意一种方案：

方案1：提前计算逆序列数组（适合列固定的场景） #

如果你的表格列数是固定的、不会动态生成，可以在初始化 DataTables 之前先读取DOM表头的列数，提前生成逆序数组再传入配置：

$(document).ready(function(){
    // 初始化前先获取列数，生成逆序数组
    const colCount = $('#example thead th').length;
    const arrayCol = Array.from(Array(colCount).keys()).reverse();

    var table = $('#example').DataTable({
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: ':visible:not(.not-export-col)',
                    orthogonal: 'export'
                }
            },
            {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                pageSize: 'A4',
                exportOptions: {
                    columns: arrayCol,
                    orthogonal: 'export'
                }
            }
        ]
    });
});

方案2：initComplete 中动态更新按钮配置（适合列动态生成的场景） #

如果你的列是表格初始化时动态生成的，必须等 initComplete 触发才能拿到准确列数，可以在回调中直接修改已初始化的按钮配置：

$(document).ready(function(){
    var table = $('#example').DataTable({
        dom: 'Bfrtip',
        initComplete:function () {
            const len = this.api().columns().count();
            const arrayCol = Array.from(Array(len).keys()).reverse();
            // 动态更新pdf按钮的列配置，索引1对应第二个按钮（pdf按钮）
            this.api().button(1).exportOptions.columns = arrayCol;
        },
        buttons: [
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: ':visible:not(.not-export-col)',
                    orthogonal: 'export'
                }
            },
            {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                pageSize: 'A4',
                exportOptions: {
                    orthogonal: 'export'
                }
            }
        ]
    });
});

方案3：使用columns回调动态计算（导出规则灵活的场景） #

columns 参数支持传入回调函数，每次触发导出时都会动态执行计算列规则，不需要提前确定列数：

$(document).ready(function(){
    var table = $('#example').DataTable({
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: ':visible:not(.not-export-col)',
                    orthogonal: 'export'
                }
            },
            {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                pageSize: 'A4',
                exportOptions: {
                    columns: function ( idx, data, node ) {
                        // 过滤不需要导出的列
                        if($(node).hasClass('not-export-col')) return false;
                        // 每次导出时动态生成逆序列索引
                        const exportCols = table.columns(':visible:not(.not-export-col)')[0].reverse();
                        return exportCols.includes(idx);
                    },
                    orthogonal: 'export'
                }
            }
        ]
    });
});

内容的提问来源于stack exchange，提问作者clovelm