如何制作多表头

Posted 2023-02-24

【中文标题】如何制作多表头

【英文标题】：How to make a multiple table header

【发布时间】：2017-06-09 13:36:00

【问题描述】：

我正在尝试制作一个合并了 2 个标题的表格。目前，我制作了 2 个带有 2 个单独标题的单独表格，看起来还不错，但是当表格宽度扩大时，第一个表格标题不会扩大。我如何合并 2 个表头，或者我可以用 2 个表头制作 1 个表。请看图片（目前的表格有 2 个表头）

这是我的代码：

function createPDF()
             /** START PDF INSTANCE */
            //var doc = new jsPDF('p', 'pt');
            var doc = new jsPDF('l', 'pt');
            var row = 80;
            addPdfHeader(doc, row, vm.translate("REPORT.LEGALFORMS ")+" "+vm.activeCompanyYear);

            doc.setFillColor(33, 150, 243); 
            var columns = [ "               ",vm.activeCompanyYear,vm.activeCompanyYear-1,vm.activeCompanyYear-2];

            var rows = [];

            var description = "";
            for(var j=0; j<vm.reportData.length; j++)
                var obj = vm.reportData[j];


                description = obj.descriptionEng;

                if(description == "total")
                    description = vm.translate("REPORT.REGISTRY.TOTAL");
                 

                var singleRow = [description,
                                 obj.year3Total,
                                 obj.year3Local,
                                 obj.year3International,
                                 obj.year2Total,
                                 obj.year2Local,
                                 obj.year2International,  
                                 obj.year1Total,
                                 obj.year1Local,
                                 obj.year1International
                               ]
               rows.push(singleRow);
                                   

            doc.autoTable(columns, [], 
                theme : 'grid',
                styles: 
                   halign: 'right'
                ,
                headerStyles: 
                   fillColor: [33, 150, 243],
                   halign:'center',
                   lineWidth: 1,
                   lineColor: [221, 221, 221]

                ,
                columnStyles:
                     0: columnWidth: 266
                ,
                margin : 
                  top : 100
                
            );

            var columns2 = [ vm.translate("MENU.SETTINGS.LEGALFORM"), 
                             vm.translate("REPORT.REGISTRY.TOTAL"),
                             vm.translate("REPORT.REGISTRY.LOCAL"),
                             vm.translate("REPORT.REGISTRY.INTERNATIONAL"),
                             vm.translate("REPORT.REGISTRY.TOTAL"),
                             vm.translate("REPORT.REGISTRY.LOCAL"),
                             vm.translate("REPORT.REGISTRY.INTERNATIONAL"),
                             vm.translate("REPORT.REGISTRY.TOTAL"),
                             vm.translate("REPORT.REGISTRY.LOCAL"),
                             vm.translate("REPORT.REGISTRY.INTERNATIONAL")
                            ];

            doc.autoTable(columns2, rows, 
                theme : 'grid',
                styles: 
                   halign: 'right'
                ,
                headerStyles: 
                   halign:'center',
                   lineWidth: 1,
                   lineColor: [221, 221, 221]
                ,
                margin : 
                  top : 120
                ,
                columnStyles:
                     0: halign:'left'
                ,
                createdCell: function(cell, data) 
                   if(data.row.raw[0] === vm.translate("REPORT.REGISTRY.TOTAL")) 
                      cell.styles.fontStyle = 'bold';
                      cell.styles.fillColor = [255,251,204];
                   
                

            );

            doc.save();
        ;

【问题讨论】：

致力于为 jspdf-autotable 3.0 版原生支持多个标头。几天后这个版本发布后会回到这个。

@SimonBengtsson 有什么消息吗？

addPdfHeader函数在哪里？

【参考方案1】：

类似这样的东西（v3 及更高版本）：

let head = [
    [
        content: 'People', colSpan: 3, styles: halign: 'center', fillColor: [22, 160, 133], 
        content: 'Data', colSpan: 2, styles: halign: 'center', fillColor: [22, 160, 133]
    ],
    ['ID', 'Name', 'Email', 'City', 'Sum'],
];

doc.autoTable(
    startY: 60,
    head: head,
    body: body,
    theme: 'grid'
);