如何使用 jsPDF-AutoTable 插件自定义 PDF 中的标题单元格?
Posted
技术标签:
【中文标题】如何使用 jsPDF-AutoTable 插件自定义 PDF 中的标题单元格?【英文标题】:How to customize header cell in PDF using jsPDF-AutoTable plugin? 【发布时间】:2016-02-04 00:54:22 【问题描述】:我在尝试使用 jsPDF-AutoTable 插件将 html 转换为 pdf 时遇到了奇怪的错误。根据official Github page,可以使用createdHeaderCell
和createdCell
挂钩自定义任何headerCell 和普通单元格。我使用下面的代码更改特定标题和行单元格的样式(Name
标题和Jack
单元格)。我也上传了这段代码here。
$('#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
之后的所有标头,而不仅仅是@ 987654339@,所以我想看看我的初始代码有什么问题。
感谢您的关注。
【问题讨论】:
【参考方案1】:jsPdf Autotables 的第 3 版已将 createdCell
替换为 didParceCell
,它提供了一个如下所示的对象:
然后您可以在其中添加一些代码,如下所示:
didParseCell: function (table)
if (table.section === 'head')
table.cell.styles.textColor = '#000000';
【讨论】:
【参考方案2】:user2771704 提供的解决方案效果很好,但如前所述,它不会更改第一个标题颜色,因为使用“fillColor”作为样式。基本上它会更改所有项目的颜色,然后您可以替换正文单元格颜色用“createdCell”
doc.autoTable(columns, rows,
createdCell: function (cell, data)
cell.styles.fillColor = '#ffffff';
,
styles: fillColor: "#43a047" ,
);
【讨论】:
【参考方案3】:由于没有人回答,我使用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');
);
【讨论】:
以上是关于如何使用 jsPDF-AutoTable 插件自定义 PDF 中的标题单元格?的主要内容,如果未能解决你的问题,请参考以下文章
vue+elementUi+dialog封装自定dialog部分属性,并打包成插件npm install mj-dialog --savedisplayjustifybetween