Question

我是angular和jspdf的新手，所以请帮助我。我正在尝试使用json数据创建pdf，并且我在Angular 6中使用了jspdf和jspdf autotable。我面临的问题是我无法将colspan应用于表头。我尝试了许多可用的不同代码，但没有运气。最终，我使用了jspdfautotable / example.js的github上可用的代码，但标题仍然与预期不符。

以下是我所指的https://github.com/simonbengtsson/jsPDFAutoTable/blob/master/examples/examples.js

export(){
    // Col spans and row spans
    var doc = new jsPDF('p', 'pt');
    doc.setFontSize(12);
    doc.setTextColor(0);
    doc.setFontStyle('bold');
    doc.text('Rowspan and colspan', 40, 50);
    let body = this.bodyRows(15);
    for (var i = 0; i < body.length; i++) {
        var row = body[i];
        if (i % 5 === 0) {
        row['id'] = {rowSpan: 5, content: i / 5 + 1, styles: {valign: 'middle', halign: 'center'}};
        }
    }
    let head = [
    [
        {content: 'Data', colSpan: 5, styles: {halign: 'center', fillColor: [22, 160, 133]}},
    ],
        ['ID', 'Name', 'Email', 'City', 'Sum']
    ]
    doc.autoTable({
    startY: 60,
    head: head,
    body: body,
    theme: 'grid'
    });
    doc.save('TESTCOLSPAN.pdf');
    }

    bodyRows(rowCount) {
        rowCount = rowCount || 10;
        let body = [];
        for (var j = 1; j <= rowCount; j++) {
            body.push({
            id: j,
            name: 'PARTH',
            email: 'PARTH',
            city: 'PARTH',
            expenses: 'PARTH',
            });
        }
    return body;
}

输出pdf图片：

Answer 1

代替

.fc-time-grid .fc-content-skeleton {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0; }
to

.fc-time-grid .fc-content-skeleton {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: 100%; }

请尝试这个，

let head = [
    [
        {content: 'Data', colSpan: 5, styles: {halign: 'center', fillColor: [22, 160, 133]}},
    ],
        ['ID', 'Name', 'Email', 'City', 'Sum']
    ]

对我有用

Output

jspdf v3自动表colspan功能不起作用

1 个答案: