如何在DataTables中设置导出PDF表格为全屏宽度

你之前设置的columnDefs仅对前端页面的表格生效，PDF导出是独立生成文档的过程，需要在导出配置里单独定义宽度规则。以下是具体解决方法：

核心修改方案 #

在DataTables的按钮配置中，针对pdfHtml5扩展添加自定义配置，强制表格占满PDF页面宽度：

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'pdfHtml5',
                customize: function(doc) {
                    // 让所有列自动均分PDF页面宽度
                    doc.content[1].table.widths = Array(doc.content[1].table.body[0].length).fill('*');
                    // 可选：切换为横向布局，更适配多列表格
                    doc.pageOrientation = 'landscape';
                    // 可选：调整字体大小避免内容溢出
                    doc.styles.tableBody.fontSize = 10;
                },
                // 调整PDF页面边距，给表格预留更多显示空间
                margin: [10, 10, 10, 10]
            }
        ],
        // 前端页面的列宽度设置（仅影响网页显示，不作用于PDF）
        columnDefs: [
            { "width": "20%", "targets": 0 },
            { "width": "20%", "targets": 1 },
            { "width": "20%", "targets": 2 },
            { "width": "20%", "targets": 3 },
            { "width": "20%", "targets": 4 }
        ]
    } );
} );

关键说明 #

1. doc.content[1].table.widths：PDF导出内容中，默认第一个元素是标题，第二个是表格，因此用content[1]定位表格。Array(...).fill('*')会让所有列自动分配剩余宽度，确保表格占满页面。
2. 横向布局适配：如果表格列数较多，开启pageOrientation: 'landscape'可以避免列被过度挤压。
3. 原代码问题：你重复设置了targets:0，应对应不同的列索引（0到4），且该配置仅控制网页端表格宽度，和PDF导出无关联。

自定义列宽度（可选） #

如果需要给特定列设置固定宽度，可手动指定宽度值：

// 按比例分配宽度
doc.content[1].table.widths = ['20%', '20%', '20%', '20%', '20%'];
// 混合固定宽度与自动分配
doc.content[1].table.widths = ['80px', '*', '*', '*', '*'];

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