使用 pdfmake 在段落周围添加边框答案

【问题标题】：Add border arround a paragraph with pdfmake使用 pdfmake 在段落周围添加边框
【发布时间】：2015-04-29 07:25:26
【问题描述】：

我正在通过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.',
    ]
};

是否可以在其中一个段落周围添加边框，还是我必须为此使用表格？

【问题讨论】：

标签： javascript pdf pdfmake

【解决方案1】：

我还没有为段落应用边框。我认为您唯一的选择是使用表格。

在这几行下面我附上了一个简单的代码，您可以直接粘贴到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'
    }

}

【讨论】：

【解决方案2】：

其他选项是使用画布在文本位置绘制一条线，如边框：

{
    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

【讨论】：