Auto width images in columns using pdfmake.js

Question

I'm trying to create a simple 2-up image layout, so each image is 50% page width in two columns, however the 'auto' or '*' widths don't seem to work with images.

Is there any way to achieve this without setting explicit widths for the images?

Or if not, is it possible to get the width of the page so I can do the math myself?

Edit:

A simplified version of the code I've tried is:

var dd = {
content: [
    {
        columns: [
            {
                image: 'sampleImage.jpg',
                width: 'auto'
            },
            {
                image: 'sampleImage.jpg',
                width: '*'
            }
        ]
    }
]
}

Using those auto widths I just get Uncaught Error: unsupported number: NaN in the console. If I change them to fixed widths, however, they work fine.

I think you have to use fixed width, as you can see in playground example http://pdfmake.org/playground.html — Nikhil Radadiya, Aug 23 '17 at 13:50
Yeah that's the point, I either need percentage based/auto widths, or I need a way to know how big the page is (in pixels) that I'm printing out so I can work out a fixed width myself. — evu, Aug 23 '17 at 14:48

score 5 · Accepted Answer · answered Sep 11 '17 at 06:22

5

I'm not sure if this functionality is available in the library or not. People have raised this as an issue on the pdfmake github issue page, and the same are still open.

But you can still implement it yourself by taking page width.

var pageWidth = 900;
var pageHeigth = 1000;

var docDefinition = {
    pageSize: {
        width: pageWidth,
        height: pageHeigth
    },
    pageMargins: [10, 10, 10, 10],
    content: [{
        image: imageEncodedData,
        width: pageWidth / 2, // for 50 % image width
        height: pageHeigth / 2, // change the numbers accordingly
        absolutePosition: {  // absolute positioning if required
            x: 270,
            y: 45
        }
    }
};

answered Sep 11 '17 at 06:22

Akshay Soam

1,580
3
21
39

1

How are you getting that page width size? Or is it just a random number? – evu Sep 11 '17 at 09:09
Although it's a random number, but you can always use logic with screen.width and screen.height property of javascript for more dynamic values (if you are making use on the browser side). – Akshay Soam Sep 11 '17 at 09:12
There's also support for standard page sizes like A4, A5 pages, whole list available at last section of http://pdfmake.org/#/gettingstarted – Akshay Soam Sep 11 '17 at 09:13
screen.width doesn't equate to the printable area on the paper. I have gone for a4 paper at 72dpi to get pixel values (595 * 842) but thought there might be a better way. Cheers. – evu Sep 11 '17 at 09:18

Auto width images in columns using pdfmake.js

1 Answers1