How do I align an image with pdfmake? - pdfmake

Question

I'm using pdfmake to create a PDF and have successfully used a data URI to embed an image. It is a small image, about 200px across, and I would like to have it right-aligned. Is there any way to push an image to the right side of the PDF?

Answer 1

You can right align your image using a pre-defined style in your document definition. The pdfmake playground has a good example of images, which I edited to add the 'right aligned' style (called 'rightme') below. I tried just adding 'alignment: right' to the document definition directly, but this does not work.
I removed the image data due to length - visit the pdfmake playground images to see this working:
var dd = {
content: [
'pdfmake (since it\'s based on pdfkit) supports JPEG and PNG format',
'If no width/height/fit is provided, image original size will be used',
{
image: 'sampleImage.jpg',
},
'If you specify width, image will scale proportionally',
{
image: 'sampleImage.jpg',
width: 150
},
'If you specify both width and height - image will be stretched',
{
image: 'sampleImage.jpg',
width: 150,
height: 150,
},
'You can also fit the image inside a rectangle',
{
image: 'sampleImage.jpg',
fit: [100, 100],
pageBreak: 'after'
},
// Warning! Make sure to copy this definition and paste it to an
// external text editor, as the online AceEditor has some troubles
// with long dataUrl lines and the following image values look like
// they're empty.
'Images can be also provided in dataURL format...',
{
image: **'IMAGE TRUNCATED FOR BREVITY'**,
width: 200,
style: 'rightme'
},
'or be declared in an "images" dictionary and referenced by name',
{
image: 'building',
width: 200
},
],
images: {
building: **'IMAGE DATA TRUNCATED FOR BREVITY'**
},
styles:{
rightme:
{
alignment: 'right'
}
}
}

Answer 2

Code below demonstrates left (default), center and right justifying an image.
Paste following code into http://pdfmake.org/playground.html for live view.
Playground requires you to assign document definition to a variable called dd
var dd = {
content: [
'left align image', ' ',
{
image: 'sampleImage.jpg',
width: 100,
height: 100,
alignment: 'left' // Default... not actually required.
},
' ', ' ', 'center align image', ' ',
{
image: 'sampleImage.jpg',
width: 100,
height: 100,
alignment: 'center'
},
' ', ' ', 'right align image', ' ',
{
image: 'sampleImage.jpg',
width: 100,
height: 100,
alignment: 'right'
}
]
}

Answer 3

$('#cmd').click(function () {
var img = document.getElementById('imgReq');
var empImage = img.getAttribute('src');
var docDefinition = {
pageMargins: [0, 0, 0, 0],
content: [
{
style: 'tableExample',
table: {
headerRows: 1,
body: [
[ {
image: 'building',
width: 195,
height: 185,
} ],
]
},
layout: {
hLineWidth: function(i, node) {
return (i === 0 || i === node.table.body.length) ? 0 : 0;
},
vLineWidth: function(i, node) {
return (i === 0 || i === node.table.widths.length) ? 0 : 0;
},
hLineColor: function(i, node) {
return (i === 0 || i === node.table.body.length) ? '#276fb8' : '#276fb8';
},
vLineColor: function(i, node) {
return (i === 0 || i === node.table.widths.length) ? '#276fb8' : '#276fb8';
},
paddingLeft: function(i, node) { return 0; },
paddingRight: function(i, node) { return 0; },
paddingTop: function(i, node) { return 0; },
paddingBottom: function(i, node) { return 0; }
}
}
],styles:{
tableExample: {
margin: [200, 74, 0, 0],
//alignment: 'center'
}
}, images: {
building: empImage
}
};

Answer 4

I used images "dictionary" in the browser (not in Nodejs) to locate an image from the server like this:
{
content: [
{
image: 'imageKey',
width: 20,
height: 20
}
],
images: {
imageKey: window.location.origin + "path/to/image" // via URL address, which can be referenced by this key
}
}
This allows you to (re-)use local images from the server with ease. I hope this will be helpful to someone in a similar situation.

Answer 5

just add alignment: "center" to the image, it works out for me)