Pdfmake: Line separator

[przemyslaw]

A good feature would be the ability to insert a horizontal line as a separator on this content from the rest of the document. This line can be modife.
This line could be modified by specifying the width(i.e. in %) of the page in the document.
:)

[bpampuch]

The general idea is to have a new node type in the document definition (called Container or Block, I'm not sure yet), which will have an optional border.

Border + its content will be positioned in accordance to margin and padding settings.

Horizontal line is just a specific case with left/top/right borders set to none.

The thing I'm thinking about at the moment is how to split Borders/Containers on page-breaks, especially when rounded-corners are used.

[sdebaun]

+1 this feature. also for your Container/Block, maybe a background color?

loving this library so far, thank you so much!

[guzmonne]

+1 for this. Great library.

Also, I am creating the horizontal lines by creating a table with a custom layout. Here is the code:

{
    table: {
            widths: ['*'],
            body: [[" "], [" "]]
    },
    layout: {
        hLineWidth: function(i, node) {
            return (i === 0 || i === node.table.body.length) ? 0 : 2;
        },
        vLineWidth: function(i, node) {
            return 0;
        },
    }
},

[infacq]

+1

[credli]

+1

[jthoenes]

Please use vectors for this:

{canvas: [{ type: 'line', x1: 0, y1: 5, x2: 595-2*40, y2: 5, lineWidth: 3 }]}

[rebelholic]

@jthoenes I guess you should add documentation about this feature.

[infacq]

1+

[brianmgray]

@jthoenes if I want to use vectors for an horizontal rule effect, can you provide guidance on how I would incorporate this as an element if I don't know exactly where it will be on the page? Say for example I have this:

"content": [
    {
      "text": [
        {
          "text": "COMPLETE: ",
          "style": "strong"
        },
        "Some text"
      ]
    },
    {
        canvas: [ {
             type: 'line', 
             x1: [in line with the page/column margins], y1: beneath that text], 
             x2: [in line with the page/column margins], y2: beneath that text],
             lineWidth: 0.5
        } ]
    }
    {
      "text": [
        {
          "text": "COMPLETE: ",
          "style": "strong"
        },
        "Some more text"
      ],
    {
        canvas: [ {
             type: 'line', 
             x1: [in line with the page/column margins], y1: beneath that text], 
             x2: [in line with the page/column margins], y2: beneath that text],
             lineWidth: 0.5
        } ]
    }
  ]

[jthoenes]

The canvas element should be place relative to the text. Doesn't it? What are you trying to achieve?

[brianmgray]

@jthoenes

Below is a sample to run in the playground.

I am using pdf-make in a larger application where we generate many PDFs. So I have code that builds the pdf-make document object. Some of our PDFs use horizontal rules to space out elements. But there might be one across the whole page, and another between two elements in a single column.

I cannot find a way in pdf-make to build a horizontal line that says "take up 100% of the available space." i.e. If I am in the root of content, take up the page width minus margins. If I am in a column, take up the column width, and so forth.

var dd = {
  "pageOrientation": "portrait",
  "pageSize": "LETTER",
  "content": [
    {
      "text": [
        {
          "text": "Some Text: ",
          "style": "strong"
        },
        "The line below will be full width"
      ]
    },
    {
        canvas: [
            {
                type: 'line',
                x1: 0,
                y1: 5,
                x2: 535,
                y2: 5,
                lineWidth: 0.5
            }
        ]
    },
    {
        columns: [
            'But what if there is a column?',
            {
                stack: [
                    'Ideally this line would be below just the text',
                    {
                         canvas: [
                            {
                                type: 'line',
                                x1: 0,
                                y1: 5,
                                x2: 250,
                                y2: 5,
                                lineWidth: 0.5
                            }
                        ]
                    }
                ]
            }
        ]
    }
  ]
}

[jthoenes]

I don't see a way to do this without hacking it into the document context inside pdfmake itself. It's currently the only place you could find out how much space is available horizontally.

[brianmgray]

Ok gotcha.

For now, I am working out a way given that I have experimentally figured out how long the full width is. So I am passing in the number of columns and dividing that width. We'll see how it looks.

Not sure how much work it would be to add a line / separator type that has maybe a thickness and a width. Then a '100%' width would work how the tables do (which themselves can be nested in all the other elements).

Thanks!

[brianmgray]

@jthoenes FYI works pretty well actually just dividing by the number of columns, and you are correct it does display relative to its position.

[ottigerb]

I have created the following function: 514 seems to fit for A4.

d.horizontalLine = function(width_percent) {
        width_percent = width_percent === undefined ? 100 : width_percent;

        var length = 514 / 100 * width_percent;

        var return_obj = {
            "margin": [0, 12, 0, 0],
            "canvas": [{
                "type": "line",
                "x1": 0,
                "y1": 0,
                "x2": length,
                "y2": 0,
                "lineWidth": 0.5,
                "lineColor": "#BDBDBD"
            }]
        };

        return return_obj;
    };

Maybe this is helpful for someone. :-)

[selmo47]

For the \ take a look on :
https://github.com/bpampuch/pdfmake/blob/master/examples/vectors.js