Images
This is simple. Just use the { image: '...' }
node type.
JPEG and PNG formats are supported.
The image node expects a valid image value. If the value is invalid or empty, an error is thrown.
var docDefinition = {
content: [
{
// you'll most often use dataURI images on the browser side
// if no width/height/fit is provided, the original size will be used
image: 'data:image/jpeg;base64,...encodedContent...'
},
{
// if you specify width, image will scale proportionally
image: 'data:image/jpeg;base64,...encodedContent...',
width: 150
},
{
// if you specify both width and height - image will be stretched
image: 'data:image/jpeg;base64,...encodedContent...',
width: 150,
height: 150
},
{
// you can also fit the image inside a rectangle
image: 'data:image/jpeg;base64,...encodedContent...',
fit: [100, 100]
},
{
// You can also cover the image inside a rectangle
image: 'data:image/jpeg;base64,...encodedContent...',
cover: { width: 100, height: 100, valign: "bottom", align: "right" },
},
{
// if you reuse the same image in multiple nodes,
// you should put it to to images dictionary and reference it by name
image: 'mySuperImage'
},
{
// under NodeJS (or in case you use virtual file system provided by pdfmake)
// you can also pass file names here
image: 'myImageDictionary/image1.jpg'
},
{
// in browser is supported loading images via url from reference by name in images
image: 'snow'
},
{
image: 'strawberries'
},
],
images: {
mySuperImage: 'data:image/jpeg;base64,...content...',
// in browser is supported loading images via url (https or http protocol) (minimal version: 0.1.67)
snow: 'https://picsum.photos/seed/picsum/200/300',
// is supported loading images via url with custom headers (minimal version: 0.2.5)
strawberries: {
url: 'https://picsum.photos/id/1080/367/267',
headers: {
myheader: '123',
myotherheader: 'abc',
}
}
}
};