Tabulator.js嵌套表格PDF导出问题：如何导出子表数据？

你遇到的问题是因为手动通过rowFormatter创建的子表属于DOM层面的动态渲染，Tabulator默认导出逻辑仅基于主表的数据源和配置项，无法识别这类手动添加的子表内容。以下是两种可行的解决方法：

方法一：改用原生SubTable配置（推荐） #

Tabulator内置了subTable配置项用于创建嵌套表格，导出时只需开启subTables参数即可自动包含子表数据。

修改主表配置 #

替换原有的rowFormatter为原生subTable：

var table = new Tabulator("#table", {
    height: "805px",
    layout: "fitColumns",
    columns: [
        { title: "Time", field: "timestamp"},
        { title: "Question", field: "questiontext"},
    ],
    // 原生嵌套表格配置
    subTable: function(row) {
        return {
            height:"1px",
            layout:"fitColumns",
            data: row.getData().answers,
            columns: [
                { 
                    title: "Answer Details", 
                    formatter: function(cell) {
                        const data = cell.getData();
                        // 自定义子表行布局，和原效果一致
                        return `<table style="width:100%;">
                            <tr>
                                <td><img src="/pictures/${data.picture}" style="width:60px;"></td>
                                <td>
                                    <div><strong>Timestamp:</strong> ${data.timestamp}</div>
                                    <div><strong>Answer:</strong> ${data.answer}</div>
                                </td>
                            </tr>
                        </table>`;
                    }
                }
            ]
        };
    },
});

导出PDF时启用子表导出 #

调用下载方法时添加subTables: true参数：

table.download("pdf", "问答记录.pdf", {
    subTables: true, // 强制导出嵌套子表
    // 可选：配置PDF样式
    pdfMake: {
        styles: {
            tableHeader: { bold: true, fontSize: 12 },
            tableCell: { fontSize: 10 }
        }
    }
});

方法二：自定义导出内容（灵活控制格式） #

如果需要更个性化的导出格式，可以通过downloadReady回调手动构建包含所有数据的导出内容，完全控制主表和子表的展示结构。

table.download("pdf", "问答记录.pdf", {
    downloadReady: function(originalContent, originalBlob) {
        const rawData = table.getData();
        let exportHtml = `
            <table style="width:100%; border-collapse: collapse;">
                <thead>
                    <tr style="border-bottom: 2px solid #000;">
                        <th style="padding: 8px;">时间</th>
                        <th style="padding: 8px;">问题</th>
                        <th style="padding: 8px;">回答时间</th>
                        <th style="padding: 8px;">回答内容</th>
                        <th style="padding: 8px;">图片</th>
                    </tr>
                </thead>
                <tbody>
        `;

        rawData.forEach(question => {
            // 添加问题行
            exportHtml += `
                <tr style="border-bottom: 1px solid #ddd;">
                    <td style="padding: 8px;">${question.timestamp}</td>
                    <td style="padding: 8px;">${question.questiontext}</td>
                    <td style="padding: 8px;"></td>
                    <td style="padding: 8px;"></td>
                    <td style="padding: 8px;"></td>
                </tr>
            `;

            // 添加每个回答行
            question.answers.forEach(answer => {
                exportHtml += `
                    <tr style="border-bottom: 1px solid #eee;">
                        <td style="padding: 8px;"></td>
                        <td style="padding: 8px;"></td>
                        <td style="padding: 8px;">${answer.timestamp}</td>
                        <td style="padding: 8px;">${answer.answer}</td>
                        <td style="padding: 8px;"><img src="/pictures/${answer.picture}" style="width:50px;"></td>
                    </tr>
                `;
            });
        });

        exportHtml += `</tbody></table>`;
        // 返回新的Blob对象替换原导出内容
        return new Blob([exportHtml], { type: "application/pdf" });
    }
});

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