PDFMake 的多行页脚
Multiline footer with PDFMake
我正在尝试使用 pdfmake 创建多行页脚;到目前为止我能做的事情:
const docDefinition = {
footer: [
{
stack: [
{ text: "Line 1" },
{ text: "Line 2" },
{ text: "Line 3" },
{ text: "Line 4" }
], style: 'footer'
}
],
styles: {
footer: {
fontSize: 6, bold: true, alignment: 'center'
}
}
};
虽然这创建了我想要的,但样式不正确。一旦我增加字体大小,底线就开始消失。如果我将字体大小设置为 12,则只有前两行出现在服务器端生成的 PDF 中。
我需要在此处进行哪些更改?
您只需要在页面上添加边距,您可以容纳任意多行。例如在pdfmake playground中输入下面的代码:http://pdfmake.org/playground.html
// playground 要求您将文档定义分配给名为 dd
的变量
let textFooter = `
A 12.4% discretionary service charge will be added to your bill. All prices are inclusive of VAT. Thank You!\n\n
This is line 2 - 263139\n
Line 3 comes here\n
Go big or go home!!!
`;
var dd = {
header: function(currentPage, pageCount, pageSize) {
return [
{ text: 'simple text\naaa\nbbb\nccc\nddd', alignment: 'center', fontSize: 9 },
]
},
footer: function(currentPage, pageCount, pageSize) {
return [
{ text: textFooter, alignment: 'center', fontSize: 9 },
]
},
// margin: [left, top, right, bottom]
pageMargins: [ 40, 60, 40, 100 ],
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
}
在上面的代码中,我将 margin bottom 设置为 100,这让我们 space 包含 4 行。
我正在尝试使用 pdfmake 创建多行页脚;到目前为止我能做的事情:
const docDefinition = {
footer: [
{
stack: [
{ text: "Line 1" },
{ text: "Line 2" },
{ text: "Line 3" },
{ text: "Line 4" }
], style: 'footer'
}
],
styles: {
footer: {
fontSize: 6, bold: true, alignment: 'center'
}
}
};
虽然这创建了我想要的,但样式不正确。一旦我增加字体大小,底线就开始消失。如果我将字体大小设置为 12,则只有前两行出现在服务器端生成的 PDF 中。
我需要在此处进行哪些更改?
您只需要在页面上添加边距,您可以容纳任意多行。例如在pdfmake playground中输入下面的代码:http://pdfmake.org/playground.html
// playground 要求您将文档定义分配给名为 dd
的变量let textFooter = `
A 12.4% discretionary service charge will be added to your bill. All prices are inclusive of VAT. Thank You!\n\n
This is line 2 - 263139\n
Line 3 comes here\n
Go big or go home!!!
`;
var dd = {
header: function(currentPage, pageCount, pageSize) {
return [
{ text: 'simple text\naaa\nbbb\nccc\nddd', alignment: 'center', fontSize: 9 },
]
},
footer: function(currentPage, pageCount, pageSize) {
return [
{ text: textFooter, alignment: 'center', fontSize: 9 },
]
},
// margin: [left, top, right, bottom]
pageMargins: [ 40, 60, 40, 100 ],
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
}
在上面的代码中,我将 margin bottom 设置为 100,这让我们 space 包含 4 行。