jspdf Autotable с colspan для последних нескольких строк

Question

На самом деле это таблица из трех столбцов, мне нужно, чтобы последние три строки были двумя столбцами, что означает 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

сразу после цикла для данных в версии 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'
            }
        }
    ]
); 

Answer 2

Попробуйте что-то вроде этого.

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 3

Вы можете использовать функцию 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 4

Я обнаружил, что это работает лучше, если в этом примере вы сделали таблицу таблицей из 6 столбцов, а затем ваши colspans будут отражать необходимую ширину. Итак, в этом примере первые две строки будут ячейками 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", 
}