如何为模板中动态生成的 jspdf 可自动生成的内容设置边框

Question

我正在使用 jspdf autotable 生成 pdf，但我无法像在模板中那样放置边框。谁能帮我解决一下。我需要将 pdf 视为模板中的格式。

header 的边框需要有 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 没有工具 "from the box" 用于在 (top || right || bottom || left) 或双边框。

您可以使用 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

如何为模板中动态生成的 jspdf 可自动生成的内容设置边框

How to give borders to jspdf autotable content generated dynamically as in template

jspdf-autotable

angular