如何在 DataTables 导出 PDF 时为前六列后插入换行以避免内容溢出-js教程-PHP中文网

如何在 DataTables 导出 PDF 时为前六列后插入换行以避免内容溢出

本文介绍通过自定义 pdf 导出逻辑，在 datatables 的 `pdfhtml5` 按钮中实现「在第 6 列后强制换行」的效果，解决宽表导出时内容横向溢出的问题，核心方法是利用 pdfmake 的 `customized` 钩子动态拆分行结构。

DataTable 默认的 pdfHtml5 导出会将整行渲染为 PDF 表格的一行（table.body[i]），当列数过多（如 12 列）且内容较宽时，极易超出 LEGAL 纸张宽度导致截断或压缩失真。单纯用 @media print { .d-none { display: none } } 仅影响浏览器打印预览，对 pdfHtml5 导出完全无效——因为该按钮底层使用 pdfMake 库直接生成 PDF，不依赖 CSS 打印样式。

✅ 正确解法：使用 customize 回调函数，接管 PDF 文档结构生成过程，在每行数据中将前 6 列与后 6 列拆分为两个独立表格行（或嵌套表格），从而实现视觉上的“换行”效果。

以下是完整可运行的配置示例（适配你当前的 DataTable 初始化代码）：

HTML设计工具专业版

企业级HTML/CSS设计系统,支持设计令牌、组件库、批量生成、主题切换与团队协作,适合团队与商业项目。

下载

$('#savedTable').DataTable({
    language: {
        url: '//cdn.datatables.net/plug-ins/1.13.5/i18n/tr.json',
    },
    responsive: true,
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'excelHtml5',
            text: '<i class="fa fa-file-excel-o mr-2"></i> EXCEL'
        },
        {
            extend: 'pdfHtml5',
            orientation: 'landscape',
            pageSize: 'LEGAL',
            text: '<i class="fa fa-file-pdf-o mr-2"></i>PDF',
            customize: function (doc) {
                // 获取原始表格 body 数据（已按 DataTable 当前状态过滤/排序）
                const originalBody = doc.content[1].table.body;

                // 重建 table.body：每行拆为两行（前6列 + 后6列）
                const newBody = [];
                for (let i = 0; i = 12) {
                        // 第一行：前6列（保留原样式，如字体、边框）
                        const topRow = row.slice(0, 6);
                        // 第二行：后6列，顶部无上边框，底部无下边框（视觉连贯）
                        const bottomRow = row.slice(6, 12).map(cell => ({
                            ...cell,
                            margin: [0, -4, 0, 0], // 微调垂直间距
                            border: [true, false, true, true] // 左、右、下有边框，上无
                        }));

                        newBody.push(topRow);
                        newBody.push(bottomRow);
                    } else {
                        newBody.push(row); // 列数不足12则保持原样
                    }
                }

                // 替换原表格 body
                doc.content[1].table.body = newBody;

                // 可选：调整列宽以适配 12→6 列布局（单位：user unit）
                doc.content[1].table.widths = Array(6).fill('*'); // 均分6列宽度
            }
        },
        {
            extend: 'colvis',
            text: '<i class="fa fa-eye mr-2"></i> Sütunlar'
        }
    ],
    searching: true,
    select: true,
});

? 关键说明与注意事项：

customize 函数在 PDF 文档对象 doc 生成后、导出前执行，可安全修改其任意属性；
doc.content[1] 通常对应主表格（索引 0 是标题，1 是表格），但建议先 console.log(doc) 确认结构；
若需更精细控制（如合并单元格、添加分页符、插入空行），可在 newBody 中插入 { text: '', style: 'blankRow' } 或 '\n' 占位；
pdfMake 的 border 属性为 [left, top, right, bottom] 布尔数组，用于模拟“跨行连续边框”；
务必测试中文显示：确保已正确引入 vfs_fonts.js，且 PDF 字体支持 UTF-8（如使用 Roboto 或自定义中文字体）；
替代方案（轻量级）：若仅需快速缓解，可改用 pageLength: 10 + scrollX: true 配合横向滚动，避免导出超宽表。

通过上述 customize 重构，导出的 PDF 将以“双行结构”呈现每条记录，彻底解决第 6 列后内容溢出问题，同时保持专业排版与可读性。