Question

我正在尝试使用JSPDF和AutoTable从html表生成PDF文件。

在我的示例中，有一个带有两个标题行的html表，如下所示：

<table id="table" style="display:none ;">
    <thead>
    <tr>
        <th >ID</th>
        <th >First name</th>
        <th >Last name</th>
        <th >Email</th>
        <th >Country</th>
        <th >IP-address</th>
        <th >IP-address</th>

    </tr>
    <tr>
        <th >ID</th>
        <th >First name</th>
        <th >Last name</th>
        <th >Email</th>
        <th> Country</th>
        <th >IP-address</th>

    </tr>
    </thead>
    </table>

但PDF文件是用单个标题行生成的..如何解决这个问题？还有一个选项可以生成仅包含所选列的PDF文件。小提琴在这里：

https://jsfiddle.net/x22fk0p4/3/

Answer 1

该插件不支持开箱即用，但可以使用挂钩手动完成。我几乎认为这是一个黑客。我所做的是首先增加默认标头的高度，然后简单地在由于它释放的空间中绘制辅助标头。

pdf.autoTable(res.columns, res.data, {
    drawHeaderRow: function(row, data) {
        row.height = 46; // Height for both headers
    },
    drawHeaderCell: function(cell, data) {
        pdf.rect(cell.x, cell.y, cell.width, cell.height, cell.styles.fillStyle);
        pdf.setFillColor(230);
        pdf.rect(cell.x, cell.y + (cell.height / 2), cell.width, cell.height / 2, cell.styles.fillStyle);
        pdf.autoTableText(cell.text, cell.textPos.x, cell.textPos.y, {
            halign: cell.styles.halign,
            valign: cell.styles.valign
        });
        pdf.setTextColor(100);
        var text = data.table.rows[0].cells[data.column.dataKey].text;
        pdf.autoTableText(text, cell.textPos.x, cell.textPos.y + (cell.height / 2), {
            halign: cell.styles.halign,
            valign: cell.styles.valign
        });
        return false;
    },
    drawRow: function(row, data) {
        // Don't print secondary header normally
        if (row.index === 0) return false;
    }
};

使用此解决方案修改了您的jsfiddle。

https://jsfiddle.net/someatoms/tbz8p79j/6/

JSPDF和AutoTable的标题行问题

1 个答案: