0
372
ViewsjsPDF autotable color in header and center text in rows
I'm trying to manipulate Autotable jsPDF, but I can't help but generate my pdf with default styles. I try the methods that I have read on various sites, but they are all outdated, and have changed several times. I would like to add a title at the beginning of the table that is centered (outside of it), add color to the table headings, and maybe paste a signature below it. I have tried various modes and the only way I can print a PDF without dying on the way is like this. I've tried manipulating it from css but it doesn't take my changes.
function generatePdf() {
var doc = new jspdf.jsPDF();
doc.autoTable({html: '.tftable'});
doc.save ("detallePrestamo.pdf");
}
generatePdf()
·
Juan Pablo Isaza
1 answers
Answer question0
I make this solution, comments on each line so that it is understood what each property does and how it should be written
function generatePdf() {
var doc = new jspdf.jsPDF();
var offsetY = 4.797777777777778; //var offsetY is for spacing
var lineHeight = 6.49111111111111; //var lineHeight is for Spacing
var fontSize = 12;
doc.text(85, 10, "Tabla de Prestamo");//asignate coordinates to the title
doc.autoTable({startY: 15,html: '.tftable', styles : { halign : 'center'}, headStyles :{fillColor : [124, 95, 240]}, alternateRowStyles: {fillColor : [231, 215, 252]}, tableLineColor: [124, 95, 240], tableLineWidth: 0.1,}); //use headStyles to bring styles to the table head, and alternateRowStyles to color the rows but one yes and one no
doc.setFontSize(fontSize);
var img = new Image(); //this mount a variable to img
img.src = 'images/signaturePDF.png' //asign the src to the img variable
doc.addImage(img, 'png', 100, doc.autoTable.previous.finalY + lineHeight * 1.5 + offsetY, 20, 20)// use the method doc.autoTable.previous.finalY + lineHeight * 1.5 + offsetY to be able to position the image of the signature below the table at a safe distance from it
doc.text(90, doc.autoTable.previous.finalY + lineHeight * 5 + offsetY, "Juan Jose Urquiza") // later add the text below the signature
doc.text(89, doc.autoTable.previous.finalY + lineHeight * 6 + offsetY, "Gerente FinanceAR") //more text
doc.save ("detallePrestamo.pdf");
}
and that are my result in image
·
Juan Pablo Isaza
Report
Answer question