Jspdf v3 autotable colspan functionality not working

Question

I am new to angular and jspdf so please help me out. I am trying to create pdf using json data and I am using jspdf and jspdf autotable in angular 6 for the same. The issue I am facing is I am not able to apply colspan to my table header. I have tried many different codes available but no luck. Finally I used the code available on github of jspdfautotable/example.js but still the header is not as expected.

Below is what I have referred to https://github.com/simonbengtsson/jsPDFAutoTable/blob/master/examples/examples.js

export(){
    // Col spans and row spans
    var doc = new jsPDF('p', 'pt');
    doc.setFontSize(12);
    doc.setTextColor(0);
    doc.setFontStyle('bold');
    doc.text('Rowspan and colspan', 40, 50);
    let body = this.bodyRows(15);
    for (var i = 0; i < body.length; i++) {
        var row = body[i];
        if (i % 5 === 0) {
        row['id'] = {rowSpan: 5, content: i / 5 + 1, styles: {valign: 'middle', halign: 'center'}};
        }
    }
    let head = [
    [
        {content: 'Data', colSpan: 5, styles: {halign: 'center', fillColor: [22, 160, 133]}},
    ],
        ['ID', 'Name', 'Email', 'City', 'Sum']
    ]
    doc.autoTable({
    startY: 60,
    head: head,
    body: body,
    theme: 'grid'
    });
    doc.save('TESTCOLSPAN.pdf');
    }

    bodyRows(rowCount) {
        rowCount = rowCount || 10;
        let body = [];
        for (var j = 1; j <= rowCount; j++) {
            body.push({
            id: j,
            name: 'PARTH',
            email: 'PARTH',
            city: 'PARTH',
            expenses: 'PARTH',
            });
        }
    return body;
}

Output pdf image:

Ruban Ruban · Accepted Answer · 2019-05-24T05:30:31

instead of

let head = [
    [
        {content: 'Data', colSpan: 5, styles: {halign: 'center', fillColor: [22, 160, 133]}},
    ],
        ['ID', 'Name', 'Email', 'City', 'Sum']
    ]

Please try this,

let head = [

      {id:{content: 'Data', colSpan: 5, styles: {halign: 'center', fillColor: [22, 160, 133]}}},

      {id:'ID', name:'Name', email:'Email', city:'City', expenses:'Sum'}
]

It works for me

Output

Jspdf v3 autotable colspan functionality not working

1 Answers