javascript 如何使用 jsPDF-AutoTable 插件自定义 PDF 中的标题单元格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33506442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to customize header cell in PDF using jsPDF-AutoTable plugin?
提问by user2771704
I encountered strange bug when tried to convert HTML to pdf using jsPDF-AutoTableplugin. According to official Github pagethere is possibility to customize any headerCell and ordinary cell by using createdHeaderCelland createdCellhooks. I used the code below to change styling for particular header and row cells (Nameheader and Hymancell). I also upload this code here.
我在尝试使用jsPDF-AutoTable插件将 HTML 转换为 pdf 时遇到了奇怪的错误。据官方Github的页面有可能通过使用自定义任何headerCell和普通电池createdHeaderCell和createdCell挂钩。我使用下面的代码来更改特定标题和行单元格（Name标题和Hyman单元格）的样式。我也在这里上传这个代码。
$('#btn').click(function(){
var columns = ['ID','Name','Address','Age'];
var rows = [
[1,'John','Vilnius',22],
[2,'Hyman','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 === 'Hyman') {
cell.styles.fontSize= 15;
cell.styles.textColor = 111;
}
}
});
doc.save('output.pdf');
});
In this code createdCellhook works as expected and style the cell with Hyman, but nothing happened for Nameheader. Did I miss something or is it a bug?
在此代码中，createdCell钩子按预期工作并使用 设置单元格样式Hyman，但Name标题没有任何反应。我错过了什么还是一个错误？
The funny thing that I find strange workaround using drawHeaderCellinstead of createdHeaderCell, but in this case styling occurs for next Addressheader, not the Nameas I wanted. My workaround: I used previous IDheader to style Name, but this solution not very beautiful, because I should use elserule for styling, otherwise styling will be applied for all headers after ID, not just Name, so I want to find out what is wrong with my initial code.
有趣的是，我发现使用drawHeaderCell而不是的奇怪解决方法createdHeaderCell，但在这种情况下，下一个Address标题会出现样式，而不是Name我想要的。我的解决方法：我使用以前的ID标题来设置样式Name，但是这个解决方案不是很漂亮，因为我应该使用else规则来设置样式，否则样式将应用于 之后的所有标题ID，而不仅仅是Name，所以我想找出我的初始值有什么问题代码。
Thank you for you attention.
谢谢您的关注。
采纳答案by user2771704
Since nobody answered I used my workaround solution using drawHeaderCellhook with code like below. I tested it on many tables and it works fine (in production I used dynamically generated table with different headers). The only real drawback that you cannot change color of the 1st header, but hopefully I don't need to do this.
由于没有人回答，我使用drawHeaderCell带有如下代码的钩子的解决方法解决方案。我在许多表上测试了它并且它工作正常（在生产中我使用动态生成的带有不同标题的表）。唯一真正的缺点是您无法更改第一个标题的颜色，但希望我不需要这样做。
$('#btn').click(function(){
var columns = ['ID','Name','Address','Age'];
var rows = [
[1,'John','Vilnius',22],
[2,'Hyman','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 === 'Hyman') {
cell.styles.fontSize= 15;
cell.styles.textColor = [255,0,0];
}
}
});
doc.save('output.pdf');
});
回答by user3571779
The solution provided by user2771704 will work well but as said its not change the first header color, for that use "fillColor" as styles.. basically it will change the color for all items and then you can replace the body cell color with "createdCell"
user2771704 提供的解决方案将运行良好，但正如所说它不会更改第一个标题颜色，为此使用“fillColor”作为样式..基本上它会更改所有项目的颜色，然后您可以用“createdCell”替换正文单元格颜色”
doc.autoTable(columns, rows, {
createdCell: function (cell, data) {
cell.styles.fillColor = '#ffffff';
},
styles: { fillColor: "#43a047" },
});
回答by lorengphd
Version 3 of jsPdf Autotables has replaced createdCellwith didParceCellwhich provides an object that looks like this:
jsPdf Autotables 的第 3 版已替换createdCell为didParceCellwhich 提供了一个如下所示的对象：
You can then add some code inside this that looks like:
然后，您可以在其中添加一些代码，如下所示：
didParseCell: function (table) {
if (table.section === 'head') {
table.cell.styles.textColor = '#000000';
}
}
