[英]How to Display image from path in pdf header using jsPDF-autotable
[英]How to customize header cell in PDF using jsPDF-AutoTable plugin?
当尝试使用jsPDF-AutoTable插件将HTML转换为pdf时,我遇到了奇怪的错误。 据官方Github的页面有可能通过使用自定义任何headerCell和普通电池createdHeaderCell
和createdCell
挂钩。 我使用下面的代码来更改特定标题和行单元格的样式( Name
标题和Jack
单元格)。 我也在这里上传这段代码。
$('#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');
});
在此代码中, createdCell
钩子按预期工作并使用Jack
为单元格设置样式,但Name
头部没有任何变化。 我错过了什么或者它是一个错误吗?
有趣的是,我发现使用drawHeaderCell
而不是createdHeaderCell
奇怪解决方法,但在这种情况下,样式发生在下一个Address
标题,而不是我想要的Name
。 我的解决方法:我使用以前的ID
标头来设置Name
样式,但是这个解决方案不是很漂亮,因为我应该使用else
规则进行样式化,否则样式将应用于ID
之后的所有标题,而不仅仅是Name
,所以我想找出什么我的初始代码有问题。
谢谢你的关注。
由于没有人回答我使用drawHeaderCell
挂钩使用我的解决方案解决方案,如下所示。 我在许多表上测试它并且它工作正常(在生产中我使用动态生成的表与不同的头)。 唯一真正的缺点是你不能改变第一个标题的颜色,但希望我不需要这样做。
$('#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 },
drawHeaderCell: function (cell, data) {
if (cell.raw === 'ID') {//paint.Name header red
cell.styles.fontSize= 15;
cell.styles.textColor = [255,0,0];
} else {
cell.styles.textColor = 255;
cell.styles.fontSize = 10;
}
},
createdCell: function (cell, data) {
if (cell.raw === 'Jack') {
cell.styles.fontSize= 15;
cell.styles.textColor = [255,0,0];
}
}
});
doc.save('output.pdf');
});
user2771704提供的解决方案将运行良好,但正如所说它不改变第一个标题颜色,为此使用“fillColor”作为样式..基本上它将改变所有项目的颜色,然后你可以用“createdCell”替换正文单元格颜色“
doc.autoTable(columns, rows, {
createdCell: function (cell, data) {
cell.styles.fillColor = '#ffffff';
},
styles: { fillColor: "#43a047" },
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.