Gewusst wie: anpassen Kopfzeile in PDF-Datei mit der jsPDF-AutoTable plugin?
Begegnete ich seltsamen Fehler, wenn versucht zu konvertieren von HTML in pdf mit jsPDF-AutoTable plugin. Nach offizielle Github-Seite gibt es die Möglichkeit, anpassen headerCell und gewöhnliche Zelle mit Hilfe von createdHeaderCell
und createdCell
Haken. Ich verwendete den folgenden code ändern, styling für Besondere Kopf-und Zeilen-Zellen (Name
Kopf-und Jack
Zelle). Ich auch hochladen dieser code hier.
$('#btn').click(function(){
var columns = ['ID','Name','Address','Age'];
var rows = [
[1,'John','Vilnius',22],
[2,'Jack','Riga',25]
];
var doc = new jsPDF('p', 'pt');
doc.setFontSize(20);
doc.text(30, 30, 'Table');
doc.autoTable(columns, rows, {
margin: { top: 50, left: 20, right: 20, bottom: 0 },
createdHeaderCell: function (cell, data) {
if (cell.raw === 'Name') {
cell.styles.fontSize= 15;
cell.styles.textColor = 111;
} else {//else rule for drawHeaderCell hook
cell.styles.textColor = 255;
cell.styles.fontSize = 10;
}
},
createdCell: function (cell, data) {
if (cell.raw === 'Jack') {
cell.styles.fontSize= 15;
cell.styles.textColor = 111;
}
}
});
doc.save('output.pdf');
});
In diesem code createdCell
Haken funktioniert wie erwartet und Stil der Zelle mit Jack
, passiert ist aber nichts für Name
header. Hab ich was verpasst oder ist es ein bug?
Die lustige Sache, die ich seltsam finden Problemumgehung verwenden drawHeaderCell
statt createdHeaderCell
, aber in diesem Fall styling-Auftritt für die nächste Address
header, nicht die Name
wie ich wollte. Mein workaround: ich habe die vorherigen ID
header style Name
, aber diese Lösung nicht sehr schön, da sollte ich verwenden else
Regel für styling, sonst styling angewendet werden, für alle Header nach ID
, nicht nur Name
, so möchte ich, um herauszufinden, was ist Los mit meinem ersten code.
Danke für Ihre Aufmerksamkeit.
InformationsquelleAutor user2771704 | 2015-11-03
Du musst angemeldet sein, um einen Kommentar abzugeben.
Da niemand antwortete, habe ich meine workaround-Lösung mit
drawHeaderCell
Haken mit code wie unten. Getestet habe ich es auf vielen Tischen und es funktioniert einwandfrei (in Produktion, die ich verwendet, dynamisch generierte Tabelle mit unterschiedlichen Kopfzeilen). Der einzige wirkliche Nachteil, dass Sie nicht die Farbe ändern von der 1. header, aber hoffentlich brauche ich nicht zu tun.InformationsquelleAutor user2771704
Die Lösung von user2771704 wird gut funktionieren, aber wie gesagt, die ändern nicht die erste header-Farbe, für die, die "fillColor" als Stile.. im Grunde ist es ändert die Farbe für alle Elemente, und dann können Sie ersetzen die Körperzelle Farbe mit "createdCell"
InformationsquelleAutor user3571779