angular - 如何为模板中动态生成的 jspdf 自动表格内容提供边框

Question

我正在使用 jspdf autotable 生成 pdf，但我没有像在模板中那样放置边框。
谁能帮我整理一下。
我需要在模板中查看 pdf。

需要标题的边框有 2 条边框线，如模板中所示。



总计的最后几行像这样显示。



TS:

captureScreen() {
    this.displayTable = true;
    var doc = new jsPDF();
    var col = ["2006", "Budgeted Operating Expenses ", 'Exclude', 'Expenses'];
    var rows = [];
    for (var i = 0; i < this.items.budget.length; i++) {
      var temp = []
      for (var key in this.items.budget[i]) {
        temp.push(this.items.budget[i][key])
      }
      rows.push(temp);
    }
    doc.text(100, 10, this.items.title.title);
    doc.text(20, 20, "Insert Property Name Here");
    doc.setFont("Times New Roman");
    doc.setFontSize(12);
    doc.text(20, 30, "Tenant:");
    doc.text(40, 30,  this.items.owner.company);

    doc.text(20, 40, "Address:");
    doc.text(40, 40,this.items.owner.address);

    doc.text(20, 50, "Suite:");
    doc.text(40, 50,this.items.owner.suite);


    doc.autoTable(col, rows,{
      tableLineColor: [189, 195, 199],
      tableLineWidth: 0.75,
    theme:"plain",  
    startY: 60,
    margin: {
        top: 60
    },
   headerStyles: {
        //Not getting what to be done here
    },
    });
    document.getElementById("convertToPdf").setAttribute('src', doc.output('datauri'))
  }

DEMO
提前致谢。

Answer 1

jsPdf-autotable 没有用于在(顶部||右侧||底部||左侧)或双边框中创建单元格边框的“开箱即用”工具。
您可以使用 jspdf 手动绘制必要元素(线条)的方法:

doc.autoTable(col, rows, {
        tableLineColor: [189, 195, 199],
        tableLineWidth: 0.75,
        theme: "plain",
        startY: 60,
        margin: {
            top: 60
        },
        drawRow: (row, data) => {
            //-------------------------------
            // Paint double lines bellow cell
            //-------------------------------
            let firstCell = row.cells[0];
            let secondCell = row.cells[1];
            if (firstCell.text == 'Total due anually') {
               let borderLineOffset = 1;
               const columnWidth = data.table.columns[3].width;
               data.doc.line(data.cursor.x - columnWidth, data.cursor.y + row.height - borderLineOffset / 2, data.cursor.x, data.cursor.y + row.height - borderLineOffset / 2);
               data.doc.line(data.cursor.x - columnWidth, data.cursor.y + row.height + borderLineOffset / 2, data.cursor.x, data.cursor.y + row.height + borderLineOffset / 2);
            }
            //-------------------------------
            // Paint footer line
            //-------------------------------
            if (secondCell.text == 'Totally sales Tax') {
                data.doc.line(data.cursor.x - data.table.width, data.cursor.y + row.height, data.cursor.x, data.cursor.y + row.height);
                data.doc.line(data.cursor.x - data.table.width, data.cursor.y + row.height, data.cursor.x, data.cursor.y + row.height);
            }
        },
        drawHeaderRow: (head, data) => {
            //---------------------------------------
            // Write the line at the bottom of header
            //---------------------------------------
            data.doc.line(data.cursor.x, data.cursor.y + head.height, data.cursor.x + data.table.width, data.cursor.y + head.height);
        }
    });

在这里，您可能会找到其他用于在 pdf 中绘制它们的元素。
jsPdf docs
StackBlitz