Question

这实际上是3列表，我需要的最后三行应该是两列，这意味着colspan 2，我们如何将colspan用于某些行？这是表的结构和代码

click()

预期结果：

--------------------------------
| Si     |  item     |  Amount |
--------------------------------
|  1     | Keyboard  |  10 $   |
|  2     | Mouse     |  5  $   |
--------------------------------


this.cols.push({si:"1",itm:"keyboard",amt:"10"})
this.cols.push({si:"2",itm:"Mouse",amt:"5"})
var columns = [
                {title: "Si.", dataKey: "si"},
                {title: "Item", dataKey: "itm"},
                {title: "Amount", dataKey: "amt"},

            ]
var a = doc.autoTable(columns, this.cols, {
                theme: 'striped',
                styles: {
                    lineWidth: 0.2,
                    lineColor: 0,
                    fontSize:8
                },
                headerStyles: {
                    fillColor: 230,
                    textColor:0,
                    fontStyle:'normal', 
                     halign: 'center'           

                },
                margin: {top: 92},
                columnStyles:{
                    value_usd: {halign: 'right'},
                    value_aed: {halign: 'right'}
                }
            });

Answer 1

尝试这样的事情。

let body = bodyRows(5);
for (var i = 0; i < body.length; i++) {
    var row = body[i];
    if (i >= body.length - 3) {
        row[i]['si'] = {
            colspan: 2,
            content: body[i]['item'],
            styles: {
                valign: 'middle',
                halign: 'center'
            }
        };
    }
}

let head = headRows();

doc.autoTable({
    startY: 60,
    head: head, //head is the header that you have created
    body: body,
    theme: 'striped'
});
return doc;

var data = [{
    'item': 'keyboard',
    'amt': '10'
}, {
    'item': 'keyboard',
    'amt': '5'
}, {
    'item': 'Total',
    'amt': '15'
}, {
    'item': 'VAT',
    'amt': '5'
}, {
    'item': 'Grand Sum',
    'amt': '15.75'
}];

function headRows() {return [{si: 'SI', item: 'item', amt: 'Amount'}];}

function bodyRows(rowCount) {
    rowCount = rowCount || 10;
    let body = [];
    for (var j = 1; j <= rowCount; j++) {
        if (j <= rowCount - 3) {,
            body.push({
                si: j,
                item: data[j]['item'],
                amt: data[j]['amt']
            });
        } else {
            body.push({
                si: data[j]['item'],
                item: data[j]['item'],
                amt: data[j]['amt']
            });
        }
    }
    return body;
}

Answer 2

您可以使用didParseCell函数来解决您的问题

例如，如果您有对象数组

var objarr=[] //array of object to construct the table
didParseCell:(data)=>{
          if(data.row.index==this.objarr.length-1&&data.column.index==0){
            data.row.cells.description.colSpan=3;
            //description above refer to the column of the table on the lastrow
          }
        }

Answer 3

如果在此示例中将表格设为6列表格，然后colspans将反映所需的宽度，则我发现它会更好。因此，在此示例中，前两行将是3-2colSpan单元格，接下来的将是4colspan单元格和2colspan单元格。

--------------------------------
| Si     |  item     |  Amount |
--------------------------------
|  1     | Keyboard  |  10 $   |
|  2     | Mouse     |  5  $   |
--------------------------------
| Total              |  15 $   |
--------------------------------
| VAT                |  5%     |
--------------------------------
| Grand Sum          |  15.75  |

我要说的是一个警告，您必须使用columnStyles设置一个标准的列宽，并设置一个最大列数为空白的行。空白的空白标题行对我有用。

 let pdfObject = {
    showHead:'never',
    head:[_.range(6).map(el=>'')],
    body: [Arrays(n)],
    rowPageBreak: "avoid",
    styles: styles,
    headStyles: headerStyles,
    bodyStyles: {
      overflow: "linebreak",
      textColor: [0, 0, 0],
    },
    columnStyle:_.range(6).reduce((cache,el)=>{
      cache[el] = {
        minCellWidth : pdfDocument.internal.pageSize.width/6, 
      };
      return cache;
    } ,{}),
    theme: "grid", 
}

jspdf带有colspan的自动表的最后几行

3 个答案: