使用 pdfmake 在段落周围添加边框
Add border arround a paragraph with pdfmake
我正在通过 pdfmake 生成 pdf。
假设我有这样的 pdf 内容
var docDefinition = {
content: [
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a pharetra odio.',
'Vestibulum erat mauris, sodales et consequat sit amet, ultricies vitae erat. Etiam feugiat orci justo, ultrices malesuada dui ornare ac.',
]
};
是否可以在其中一个段落周围添加边框,还是我必须为此使用表格?
我还没有为段落应用边框。我认为您唯一的选择是使用表格。
在这几行下面,我附上了一个简单的代码,您可以直接粘贴到 pdfmake playground 以进行尝试。
var dd = {
content: [
{
style: 'tableExample',
color: '#555',
table: {
body: [
[
{
text : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a pharetra odio.\n\nVestibulum erat mauris, sodales et consequat sit amet, ultricies vitae erat. Etiam feugiat orci justo, ultrices malesuada dui ornare ac.'
}
],
[
{
text : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a pharetra odio.\n\nVestibulum erat mauris, sodales et consequat sit amet, ultricies vitae erat. Etiam feugiat orci justo, ultrices malesuada dui ornare ac.'
}
],
[
{
text : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a pharetra odio.\n\nVestibulum erat mauris, sodales et consequat sit amet, ultricies vitae erat. Etiam feugiat orci justo, ultrices malesuada dui ornare ac.'
}
],
]
},
layout: {
//hLineWidth: function(i, node) {
// return (i === 0 || i === node.table.body.length) ? 2 : 1;
//},
//vLineWidth: function(i, node) {
// return (i === 0 || i === node.table.widths.length) ? 2 : 1;
//},
hLineColor: function(i, node) {
return (i === 0 || i === node.table.body.length) ? 'red' : 'blue';
},
vLineColor: function(i, node) {
return (i === 0 || i === node.table.widths.length) ? 'red' : 'blue';
},
paddingLeft: function(i, node) { return 40; },
paddingRight: function(i, node) { return 40; },
paddingTop: function(i, node) { return 20; },
paddingBottom: function(i, node) { return 20; }
}
}
],
defaultStyle: {
alignment: 'justify'
}
}
另一种选择是使用 canvas 在文本位置画一条像边框一样的线条:
{
canvas: [
{ type: 'line', x1: 390, y1: -80, x2: 510, y2: -80, lineWidth: 1 }, //Up line
{ type: 'line', x1: 390, y1: -35, x2: 510, y2: -35, lineWidth: 1 }, //Bottom line
{ type: 'line', x1: 390, y1: -80, x2: 390, y2: -35, lineWidth: 1 }, //Left line
{ type: 'line', x1: 510, y1: -80, x2: 510, y2: -35, lineWidth: 1 }, //Rigth line
]
},
这个在PDF的右上角画了一个正方形。
冒险是你可以使用一些像这样的风格:lineWidth
我正在通过 pdfmake 生成 pdf。
假设我有这样的 pdf 内容
var docDefinition = {
content: [
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a pharetra odio.',
'Vestibulum erat mauris, sodales et consequat sit amet, ultricies vitae erat. Etiam feugiat orci justo, ultrices malesuada dui ornare ac.',
]
};
是否可以在其中一个段落周围添加边框,还是我必须为此使用表格?
我还没有为段落应用边框。我认为您唯一的选择是使用表格。
在这几行下面,我附上了一个简单的代码,您可以直接粘贴到 pdfmake playground 以进行尝试。
var dd = {
content: [
{
style: 'tableExample',
color: '#555',
table: {
body: [
[
{
text : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a pharetra odio.\n\nVestibulum erat mauris, sodales et consequat sit amet, ultricies vitae erat. Etiam feugiat orci justo, ultrices malesuada dui ornare ac.'
}
],
[
{
text : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a pharetra odio.\n\nVestibulum erat mauris, sodales et consequat sit amet, ultricies vitae erat. Etiam feugiat orci justo, ultrices malesuada dui ornare ac.'
}
],
[
{
text : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a pharetra odio.\n\nVestibulum erat mauris, sodales et consequat sit amet, ultricies vitae erat. Etiam feugiat orci justo, ultrices malesuada dui ornare ac.'
}
],
]
},
layout: {
//hLineWidth: function(i, node) {
// return (i === 0 || i === node.table.body.length) ? 2 : 1;
//},
//vLineWidth: function(i, node) {
// return (i === 0 || i === node.table.widths.length) ? 2 : 1;
//},
hLineColor: function(i, node) {
return (i === 0 || i === node.table.body.length) ? 'red' : 'blue';
},
vLineColor: function(i, node) {
return (i === 0 || i === node.table.widths.length) ? 'red' : 'blue';
},
paddingLeft: function(i, node) { return 40; },
paddingRight: function(i, node) { return 40; },
paddingTop: function(i, node) { return 20; },
paddingBottom: function(i, node) { return 20; }
}
}
],
defaultStyle: {
alignment: 'justify'
}
}
另一种选择是使用 canvas 在文本位置画一条像边框一样的线条:
{
canvas: [
{ type: 'line', x1: 390, y1: -80, x2: 510, y2: -80, lineWidth: 1 }, //Up line
{ type: 'line', x1: 390, y1: -35, x2: 510, y2: -35, lineWidth: 1 }, //Bottom line
{ type: 'line', x1: 390, y1: -80, x2: 390, y2: -35, lineWidth: 1 }, //Left line
{ type: 'line', x1: 510, y1: -80, x2: 510, y2: -35, lineWidth: 1 }, //Rigth line
]
},
这个在PDF的右上角画了一个正方形。 冒险是你可以使用一些像这样的风格:lineWidth