来自 HTML 表的 jsPDF AutoTable 行跨度/列跨度答案

【问题标题】：jsPDF AutoTable rowspan/colspan from HTML table来自 HTML 表的 jsPDF AutoTable 行跨度/列跨度
【发布时间】：2016-02-09 06:22:18
【问题描述】：

我正在使用 jsPDF AutoTable (https://github.com/simonbengtsson/jsPDF-AutoTable)。

我有一个带有 rowspan="2" 的 HTML 表，当使用此表生成 pdf 时，不再有 rowspan="2" :(

我修改插件添加 rowSpan 属性（见 [[[[[ ADDED ]]]]] 标记）：

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 }
};

然后对于每个要绘制的单元格，我都有：

    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;

                }

drawCell 中的 rowSpan 值正确，但 pdf 结果非常错误！ pdf 的所有数据都在同一行，我不知道为什么。对不起，我不能发布截图，因为我没有声誉。

【问题讨论】：

请阅读并关注此guide。提供您的 HTML / JS，以便其他人可以尝试帮助您。
好的，我添加了 JS 代码。谢谢提及

标签： javascript canvas html-table jspdf jspdf-autotable

【解决方案1】：

编辑：现在支持 Rowspans、colspans 和 css 样式，并且应该开箱即用 docs

jspdf-autotable 插件目前仅支持从 html 表格转换数据。包括行跨度等所有样式都必须手动应用。

【讨论】：