最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jsPDF AutoTable rowspancolspan from HTML table - Stack Overflow

programmeradmin2浏览0评论

I'm using jsPDF AutoTable ().

I have an HTML table with rowspan="2" and when the pdf is generated with this table, there is no rowspan="2" anymore :(

I modify the plugin to add rowSpan attribute (see [[[[[ ADDED ]]]]] mark ) :

var autoTableHtmlToJson = function(table){

    var data = [],
        headers = [],
        header = table.rows[0],
        tableRow,
        rowData,
        i,
        j;

    for( i = 0 ; i < header.cells.length;i++){
        headers.push( (typeof header.cells[i] !== "undefined") ? header.cells[i].textContent : "" );
    }

    for( i = 1 ; i < table.rows.length; i++ ){
        tableRow = table.rows[i];
        rowData = [];

        for( j = 0; j < header.cells.length; j++ ){
            if( typeof tableRow.cells[j] !== "undefined" ){
                rowData.push({
                    value   : tableRow.cells[j].textContent,
                    rowSpan : tableRow.cells[j].rowSpan <==== [[[[[ ADDED ]]]]]
                });
            }
            else{
                rowData.push({
                    value   : "",
                    rowSpan : 1 <==== [[[[[ ADDED ]]]]]
                });
            }
        }
        data.push( rowData );
    }
    return { columns:headers, data:data, rows:data }
};

Then for each cell to draw I have :

    drawCell: function (cell, data) {
                    doc.rect(cell.x, cell.y, cell.width, cell.height * cell.raw.rowSpan, 'S');
                    doc.autoTableText(cell.raw.value,cell.x + cell.width / 2, cell.y + cell.height * cell.raw.rowSpan, {
                    halign: 'center',
                    valign: 'middle',
                    overflow: 'linebreak'
                });
                return false;

                }

The rowSpan has the right value in drawCell but the pdf result is very wrong ! The pdf have all data on the same line and I don't know why. Sorry I can't post the screenshot because I have not the reputation for.

I'm using jsPDF AutoTable (https://github./simonbengtsson/jsPDF-AutoTable).

I have an HTML table with rowspan="2" and when the pdf is generated with this table, there is no rowspan="2" anymore :(

I modify the plugin to add rowSpan attribute (see [[[[[ ADDED ]]]]] mark ) :

var autoTableHtmlToJson = function(table){

    var data = [],
        headers = [],
        header = table.rows[0],
        tableRow,
        rowData,
        i,
        j;

    for( i = 0 ; i < header.cells.length;i++){
        headers.push( (typeof header.cells[i] !== "undefined") ? header.cells[i].textContent : "" );
    }

    for( i = 1 ; i < table.rows.length; i++ ){
        tableRow = table.rows[i];
        rowData = [];

        for( j = 0; j < header.cells.length; j++ ){
            if( typeof tableRow.cells[j] !== "undefined" ){
                rowData.push({
                    value   : tableRow.cells[j].textContent,
                    rowSpan : tableRow.cells[j].rowSpan <==== [[[[[ ADDED ]]]]]
                });
            }
            else{
                rowData.push({
                    value   : "",
                    rowSpan : 1 <==== [[[[[ ADDED ]]]]]
                });
            }
        }
        data.push( rowData );
    }
    return { columns:headers, data:data, rows:data }
};

Then for each cell to draw I have :

    drawCell: function (cell, data) {
                    doc.rect(cell.x, cell.y, cell.width, cell.height * cell.raw.rowSpan, 'S');
                    doc.autoTableText(cell.raw.value,cell.x + cell.width / 2, cell.y + cell.height * cell.raw.rowSpan, {
                    halign: 'center',
                    valign: 'middle',
                    overflow: 'linebreak'
                });
                return false;

                }

The rowSpan has the right value in drawCell but the pdf result is very wrong ! The pdf have all data on the same line and I don't know why. Sorry I can't post the screenshot because I have not the reputation for.

Share Improve this question edited Feb 21, 2020 at 23:42 Simon Bengtsson 8,1913 gold badges63 silver badges90 bronze badges asked Nov 8, 2015 at 14:24 riwanabriwanab 2752 gold badges4 silver badges11 bronze badges 2
  • please read and follow this guide. provide your HTML / JS so others can try to help you. – Romulo Commented Nov 8, 2015 at 15:27
  • Ok I added the JS code. Thanks for mention it – riwanab Commented Nov 8, 2015 at 17:34
Add a ment  | 

1 Answer 1

Reset to default 3

EDIT: Rowspans, colspans and css styling are now supported and should work out of the box docs

The jspdf-autotable plugin currently only supports converting data from an html table. All styling including rowspans etc have to be applied manually.

发布评论

评论列表(0)

  1. 暂无评论