Pdfmake: Border around Image

[ximex]

I didn't find an option to set a border around an image

[philonor]

As a workaround you can do the following:

{
  table: {
    widths: ['*'],
    body: [
      [{
        image: data.Signature,
        width: 150
      }]
    ]
  }
}

Resulting in this:

[varunsharma27]

In my case, i get a Stray Line upon pagination and '\n' is not working for text (not related to this).
Any Idea? (This line does not appear on the last page though, so is it because of pagination?)

Code:-

var diagram = [
    {
        table: {
            widths: ['*'],
            body: [
                [{
                    image: dataUrl,
                    width: width,
                    alignment: 'center'
                }]
            ]
        }
    }
];
console.log('Pushing element to PDF:- ', index)
pdf.content.push(diagram);
pdf.content.push('\n');

As of \n text :-
pdf.content.push({ text: '\n\n' + $('#mytext', formObj)[0].value.toString() })

What i suspect is that upon pagination, the table is divided to fit as much data as possible in first page and since there is only one image, we see table's top bar as a straight line. I'm not very much familiar with your code base, could you fix it such that if the top element is not small enough to fit in the page, go to next page?

[elainebyrne]

It's a shame that all threads requesting for border-radius is closed by a certain member because of this thread.

When will the mod/admin of this plugin understand the difference between a border and a border-radius?!

[liborm85]

This is feature request for implement border for image, there is no description of what types of borders to be supported.
Pdfmake not support CSS styles but have own definition. Some namesborder and border-radius are from CSS and they mean for pdfmake one - border styling.

This is only feature request, pull request is welcome.

[maganap]

As a workaround you can do the following:

{
  table: {
  widths: ['*'],
  body: [
    [{
      image: data.Signature,
      width: 150
    }]
  ]
  }
}

Resulting in this:

To complement this workaround, in my case I had a couple of extra considerations on that table:

• I needed to remove the cell padding (because my images are colurful)
• My image was embedded in a stack, which was causing the stack alignment: 'center' to be lost by this workaround table. So, I ended up making a 3 column table, to force the image in the center cell to be shown in the center.

  const stack = [
    { text: fileNumber, fontSize: 6 },
    {
      layout: {
        defaultBorder: false,
        paddingLeft: function(i, node) { return 0; },
        paddingRight: function(i, node) { return 0; },
        paddingTop: function(i, node) { return 0; },
        paddingBottom: function(i, node) { return 0; },
        hLineColor: function (i, node) { return 'gray'; },
        vLineColor: function (i, node) { return 'gray'; },
      },
      table: {
        widths: ['*', 'auto', '*'],
        body: [
          [{}, { image: image, fit: [40, 40], border: [true, true, true, true] }, {}]
        ]
      },
    },
    { text: fileName, fontSize: 6, maxHeight: 8 }, // force 1 line text clip
    { text: `${pages} págs - ${fileType}`, fontSize: 6, maxHeight: 8 },
  ];

  return {
    stack: stack,
    margin: 1,
    alignment: 'center',
  };

Shows something like this: (that's a single stack of many that I later on embed in another table)

Otherwise you end up with the image aligned to the left while the rest of the text is centered.