Styjun

i am using jspdf autotable to generate pdf, but i am failing to put borders as in the template.
Can anyone help me to sort it out.
i need the pdf viewed to be as in template.

Need border of header to have 2 border lines as shown here in template.

Last rows of total to be displayed like this.

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
Thanks in advance.

jsPdf-autotable has no tools "from the box" for creating cell borders in (top || right || bottom || left) or double bourder.


You may use jspdf methods for manualy paint necessary elements (lines):

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

Here you may found other elements for paint them in pdf.
jsPdf docs
StackBlitz