Rowspan issue in jsPDF-AutoTable

Question

I am using jsPDF-AutoTable plugin for making pdf from HTML table. But rowspan is not correctly showing please see here the link of jsfiddle.

Here is JS:

function htmlToPdf(autoTableId='', fileName = '', headerHtmlId = '', footerHtmlId='', otherHtmlId = '' ) {
    //let doc = new jsPDF();
    let doc = new jsPDF('p', 'pt', 'a4', true);  //pt = px * .75

    let table = autoTableId ? ($("#"+autoTableId).get(0)) : document.getElementById("autoTableId");
    let newFileName = fileName ? (fileName + '.pdf') : 'report.pdf';
    let headerHtml = headerHtmlId ? ($("#"+headerHtmlId).get(0)) : document.getElementById("headerHtmlId");
    let footerHtml = footerHtmlId ? ($("#"+footerHtmlId).get(0)) : document.getElementById("footerHtmlId");
    let otherHtml = otherHtmlId ? ($("#"+otherHtmlId).get(0)) : document.getElementById("otherHtmlId");

    let startY = 30;
    let finalY = doc.previousAutoTable.finalY;
    let pageNumber = doc.internal.getNumberOfPages();
    doc.setPage(pageNumber);
    let totalPagesExp = "{total_pages_count_string}";

    // Document default options
    doc.autoTableSetDefaults({
        //headStyles: {fillColor: [155, 89, 182]}, // Purple, fillColor: 0
        //margin: {top: 25},
    });

    // Document margin list
    let margins = {mTop: 10, mBottom: 60, mLeft: 50, pTop: 10, pBottom: 60, pLeft: 50, width: 800};

    // Skip elements instead of display: none
    let specialElementHandlers = {
        '#skipText': function (element,renderer) {
            return true;
        }
    };

    // Other content options
    let otherContentOptions = {
        'width': margins.width, //max width of content on PDF
        'elementHandlers': specialElementHandlers,
        'pagesplit': true,
    };

    // Header content options
    let header = function(data) {
        doc.setFontSize(18);
        doc.setTextColor(40);
        doc.setFontStyle('normal');
        //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
        /*if (base64Img) {
            doc.addImage(base64Img, 'JPEG', data.settings.margin.left, 15, 10, 10);
        }*/

        //let headerHtml = '<header>Hello Header</header>';
        //doc.text(headerHtml, data.settings.margin.left + 15, 22);
        doc.fromHTML(
            headerHtml,
            margins.mLeft, //x coord
            margins.mTop, //y coord
            otherContentOptions, //options object
            margins
        );
    };

    // Footer content options
    let footer = function(data) {
        let str = "Page " + doc.internal.getNumberOfPages();
        // Total page number plugin only available in jspdf v1.0+
        if (typeof doc.putTotalPages === 'function') {
            str = str + " of " + totalPagesExp;
        }
        doc.setFontSize(10);

        // jsPDF 1.4+ uses getWidth, <1.4 uses .width
        let pageSize = doc.internal.pageSize;
        let pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
        doc.text(str, data.settings.margin.left, pageHeight - 10);
    };

    // Auto table content options
    let autoTableOptions = {
        html: table,
        startY: startY, //false
        //margin: {top: 30},
        theme: 'plain', //striped, plain, grid
        cellWidth: 'auto',
        useCss: true,
        //tableWidth: 'wrap',
        margin: {bottom:20},
        tableLineWidth: .75,
        tableLineColor: [0, 0, 0],
        styles: {
            fontSize: 10.5, //14px
            font: 'helvetica', //helvetica, times, courier
            lineColor: [0, 0, 0], //or single value ie. lineColor: 255,
            lineWidth: .75, //1px
            cellPadding: 1.5,
            textColor: [0, 0, 0],
            fillColor: [255, 255, 255], //false for transparent or number or array of number
            valign: 'middle', //top, middle, bottom
            halign: 'left', //left, center, right
            cellWidth: 'auto', //'auto', 'wrap' or a number
            overflow: 'ellipsize', //visible, hidden, ellipsize or linebreak
            fontStyle: 'normal', //normal, bold, italic, bolditalic
        },

        // Header & Footer
        didDrawPage: function (data) {
            // Header Content
            header(data);

            // Footer Content
            footer(data);
        },

    };

    // Auto table content
    doc.autoTable(autoTableOptions);

    // Total page number
    if (typeof doc.putTotalPages === 'function') {
        doc.putTotalPages(totalPagesExp);
    }


    // Output
    //doc.save(newFileName);
    doc.output("dataurlnewwindow");
}

The above function is to make pdf from HTML table and the HTML is in this jsfiddle

Here is a Screenshot:

Can anyone help me?

If the question is unclear please suggest me and thanks in advance.

Answer 1

Update to the latest version and this should be fixed. If not you can create a new issue in the github repo.