如何在jsPDF中旋转指定表头？求推荐PDF生成库

一、解决jsPDF-autoTable表头旋转问题 #

要实现「Severity」「Likelihood」「IRPN」表头旋转90度，不能单独调用doc.text()，需借助jsPDF-autoTable的didDrawCell钩子，在单元格绘制完成后覆盖原有内容，重新绘制旋转文本。具体修改如下：

修改buildTable方法中的autoTable配置，添加didDrawCell回调：

buildTable(docDefinition){
    var header = [
        [
            {content: 'Hazard Identification', colSpan: 4, styles: {halign: 'center'}},
            {content: 'Risk Evaluation', colSpan: 4, styles: {halign: 'center'}},
            {content: 'Risk Control', colSpan: 7, styles: {halign: 'center'}},
        ],
        [
            {content: 'Ref', styles: {halign: 'center'}},
            {content: 'Work Activity', styles: {halign: 'center'}},
            {content: 'Hazard', styles: {halign: 'center'}},
            {content: 'Possible Injury / ill-Health', styles: {halign: 'center'}},
            {content: 'Existing Risk Controls', styles: {halign: 'center'}},
            {content: 'Severity', styles: {halign: 'center'}},
            {content: 'Likelihood', styles: {halign: 'center'}},
            {content: 'IRPN', styles: {halign: 'center'}},
            {content: 'Additional Controls', styles: {halign: 'center'}},
            {content: 'Severity', styles: {halign: 'center'}},
            {content: 'Likelihood', styles: {halign: 'center'}},
            {content: 'IRPN', styles: {halign: 'center'}},
            {content: 'Implementation Person', styles: {halign: 'center'}},
            {content: 'Due Date', styles: {halign: 'center'}},
            {content: 'Remarks', styles: {halign: 'center'}},
        ]
    ];

    const rotateHeaders = ['Severity', 'Likelihood', 'IRPN'];

    docDefinition.autoTable({
        head: header,
        headStyles: {
            lineWidth: 0.25
        },
        body: [],
        didDrawCell: (data) => {
            // 仅处理表头第二行的指定单元格
            if (data.section === 'head' && data.row.index === 1 && rotateHeaders.includes(data.cell.raw.content)) {
                // 清空原有单元格内容
                docDefinition.setFillColor(255, 255, 255);
                docDefinition.rect(data.cell.x, data.cell.y, data.cell.width, data.cell.height, 'F');
                // 绘制旋转90度的文本，调整位置居中
                docDefinition.text(
                    data.cell.raw.content,
                    data.cell.x + data.cell.width / 2,
                    data.cell.y + data.cell.height / 2,
                    { angle: -90, align: 'center', valign: 'middle' }
                );
            }
        }
    });

    return docDefinition;
}

关键说明： #

• 通过didDrawCell钩子监听单元格绘制事件，精准定位目标表头单元格（第二行、内容在rotateHeaders数组内）
• 先以白色填充清空原有内容，再调用doc.text()绘制旋转文本，通过angle: -90实现旋转，同时设置居中对齐保证文本位置正确

二、推荐PDF生成库 #

如果jsPDF和pdfmake的限制难以适配需求，推荐以下更灵活的选项：

• Puppeteer：基于Chrome浏览器，直接用HTML/CSS编写页面布局后生成PDF，支持所有CSS特性，复杂表格、样式完全可控，适配前端或Node.js环境。
• wkhtmltopdf：轻量级工具，通过HTML/CSS生成PDF，无需依赖浏览器，适合服务端批量生成，可直接命令行调用。
• PDFKit：Node.js专属库，提供底层API手动构建PDF，支持完全定制化内容和布局，适合需要精细控制PDF结构的场景。

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