javascript - jsPDF autotable color in header and center text in rows - Stack Overflow

admin管理员组

文章数量:1356370

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

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

• javascript
• pdf
• colors
• jspdf
• jspdf-autotable

Share Improve this question Follow asked Sep 4, 2021 at 23:59 user16754567user16754567

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I make this solution, ments 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

To help clarify @user16754567 answer above:

Based on the initial question which was asked on how to add color in header and center the table. The code below explains it.

var doc = new jspdf.jsPDF(); doc.autoTable({ headStyles : {fillColor : [124, 95, 240]}, //This will change the header colour, feel free to change to rgb values to suite your need. alternateRowStyles: {fillColor : [231, 215, 252]} //This is used to add colours in your rows });

for more info regarding jpdf, check out these links:

2. https://www.youtube./watch?v=rMeeWIIZGQ8.
3. https://www.freakyjolly./angular-jspdf-autotable-tutorial/

本文标签： javascriptjsPDF autotable color in header and center text in rowsStack Overflow