带有colspan的jspdf Autotable最后几行

Question

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

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

预期的结果：

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

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 列表格，然后您的 colspan 将反映所需的宽度，效果会更好。 所以在这个例子中，前两行是 3-2colSpan 单元格，接下来是 4-colspan 单元格和 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", 
}

Answer 4

就在版本 3 中循环数据之后 > 你可以这样做：

//your data
let data = {
  details: []
}
//parse the data for the table        
let dataTable = []
let billTotal = 0
for (let index = 0; index < data.details.length; index++) {
    const element = data.details[index];
    billTotal += element.bill_final
    dataTable.push([
        index + 1,
        element.site_id,
        element.wbs,
        element.prov,
        element.penalty_price,
        element.bill_final,
    ]);
}
//push the last one after looping your fixed data.
//you can also style as you like.
dataTable.push(
    [{
            content: 'TOTAL : ',
            colSpan: 5,
            styles: {
                halign: 'right'
            }
        },
        {
            content: billTotal,
            styles: {
                halign: 'center'
            }
        }
    ]
);