如何使用pdfmake调整列的大小?
How to adjust size of column with pdfmake?
我目前正在客户端使用 pdfmake
生成 PDF,我有一个问题:
我想调整整个 Column 2
+ A
, B
块的大小,但我不能,即使我输入了巨大的值......目标是将 Column 2
在上面, A
和 B
就在它下面。
我做错了什么吗?
这是我的代码(你可以试试:http://pdfmake.org/playground.html)
var dd = {
content: [
{
columns: [
{
text: 'Column 1',
style: [{bold: true, alignment: 'center'}],
width: 45
},
[
{
text: 'Column 2',
style: [{bold: true, alignment: 'center'}],
width: 200 // Nothing changes..
},
{
columns: [
{
text: 'A',
width: '*',
style: [{bold: true, alignment: 'center'}],
},
{
text: 'B',
width: '*',
style: [{bold: true, alignment: 'center'}],
}
]
}
],
{
text: 'Column 3',
width: '*',
style: [{bold: true, alignment: 'center'}],
}
]
}
]
}
you need to use table attribute into content instead of columns. please look into pdfmake/playground.html properly you will surely get an answer. I have uploaded some content from that which is useful to you.
{
style: 'tableExample',
color: '#444',
table: {
widths: [200, 'auto', 'auto'],
headerRows: 2,
// keepWithHeaderRows: 1,
body: [
[{text: 'Header with Colspan = 2', style: 'tableHeader', colSpan: 2, alignment: 'center'}, {}, {text: 'Header 3', style: 'tableHeader', alignment: 'center'}],
[{text: 'Header 1', style: 'tableHeader', alignment: 'center'}, {text: 'Header 2', style: 'tableHeader', alignment: 'center'}, {text: 'Header 3', style: 'tableHeader', alignment: 'center'}],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
[{rowSpan: 3, text: 'rowSpan set to 3\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor'}, 'Sample value 2', 'Sample value 3'],
['', 'Sample value 2', 'Sample value 3'],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
['Sample value 1', {colSpan: 2, rowSpan: 2, text: 'Both:\nrowSpan and colSpan\ncan be defined at the same time'}, ''],
['Sample value 1', '', ''],
]
}
},
{
style: 'tableExample',
table: {
widths: [100, '*', 200, '*'],
body: [
['width=100', 'star-sized', 'width=200', 'star-sized'],
['fixed-width cells have exactly the specified width', {text: 'nothing interesting here', italics: true, color: 'gray'}, {text: 'nothing interesting here', italics: true, color: 'gray'}, {text: 'nothing interesting here', italics: true, color: 'gray'}]
]
}
},
我目前正在客户端使用 pdfmake
生成 PDF,我有一个问题:
我想调整整个 Column 2
+ A
, B
块的大小,但我不能,即使我输入了巨大的值......目标是将 Column 2
在上面, A
和 B
就在它下面。
我做错了什么吗?
这是我的代码(你可以试试:http://pdfmake.org/playground.html)
var dd = {
content: [
{
columns: [
{
text: 'Column 1',
style: [{bold: true, alignment: 'center'}],
width: 45
},
[
{
text: 'Column 2',
style: [{bold: true, alignment: 'center'}],
width: 200 // Nothing changes..
},
{
columns: [
{
text: 'A',
width: '*',
style: [{bold: true, alignment: 'center'}],
},
{
text: 'B',
width: '*',
style: [{bold: true, alignment: 'center'}],
}
]
}
],
{
text: 'Column 3',
width: '*',
style: [{bold: true, alignment: 'center'}],
}
]
}
]
}
you need to use table attribute into content instead of columns. please look into pdfmake/playground.html properly you will surely get an answer. I have uploaded some content from that which is useful to you.
{
style: 'tableExample',
color: '#444',
table: {
widths: [200, 'auto', 'auto'],
headerRows: 2,
// keepWithHeaderRows: 1,
body: [
[{text: 'Header with Colspan = 2', style: 'tableHeader', colSpan: 2, alignment: 'center'}, {}, {text: 'Header 3', style: 'tableHeader', alignment: 'center'}],
[{text: 'Header 1', style: 'tableHeader', alignment: 'center'}, {text: 'Header 2', style: 'tableHeader', alignment: 'center'}, {text: 'Header 3', style: 'tableHeader', alignment: 'center'}],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
[{rowSpan: 3, text: 'rowSpan set to 3\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor'}, 'Sample value 2', 'Sample value 3'],
['', 'Sample value 2', 'Sample value 3'],
['Sample value 1', 'Sample value 2', 'Sample value 3'],
['Sample value 1', {colSpan: 2, rowSpan: 2, text: 'Both:\nrowSpan and colSpan\ncan be defined at the same time'}, ''],
['Sample value 1', '', ''],
]
}
},
{
style: 'tableExample',
table: {
widths: [100, '*', 200, '*'],
body: [
['width=100', 'star-sized', 'width=200', 'star-sized'],
['fixed-width cells have exactly the specified width', {text: 'nothing interesting here', italics: true, color: 'gray'}, {text: 'nothing interesting here', italics: true, color: 'gray'}, {text: 'nothing interesting here', italics: true, color: 'gray'}]
]
}
},