Pdfmake: Error when inserting images

[SalunMarvin]

Hi, guys!
I'm having some problem to add images to the PDF. It's a Node application (an API with pipe-server) that saves locally the PDF.

When I try to put the PATH to the image, the following error is given:
_invalid image, images dictionary should contain dataURL entries (or local file paths in node.js)_

And when I try to put the Base64 converted image (by this site: https://www.base64-image.de/) I get this error:

_Error: unsupported number: NaN_

I can't evolve the application, it doesn't work anyway. I tried, inclusive, putting the same base 64 image from the playground and got this error.

This is the saving file code:

pdfDocument.pipe(fs.createWriteStream('pdfs/output2.pdf'))

pdfDocument.end()

[liborm85]

Attach full example source code for reproduce problem.

[SalunMarvin]

@liborm85 sorry, didn't received any notification of this answer, here you have the code:

```let PDFDocument = require('pdfmake')
let fs = require('fs')
let path = require('path');

exports.exportPDF = function* (request, reply) {
let fonts = {
Roboto: {
normal: './fonts/Roboto-Regular.ttf',
bold: './fonts/Roboto-Medium.ttf',
italics: './fonts/Roboto-Italic.ttf',
bolditalics: './fonts/Roboto-MediumItalic.ttf'
}
}

let document = new PDFDocument(fonts)

let docDefinition = {
content: [
{
columns: [{
width: 'auto',
image: './images/knowhowlogo.png'
},
[{
width: '*',
text: 'TEST',
fontSize: 16
},
{ text: 'TEST', fontSize: 8 },]
],
columnGap: 10
},
],
styles: {
content: {
fontSize: 10,
bold: false
},
signature: {
fontSize: 12,
bold: false
}
},
}

let pdfDocument = document.createPdfKitDocument(docDefinition)

pdfDocument.pipe(fs.createWriteStream('pdfs/output.pdf'))

pdfDocument.end()

let APIResponse = {
'PDF': 'pdfs/output.pdf'
}

reply(
APIResponse
)
}```

[7samurai]

I think its the problem, when you try colums with images and width. When you habe an image and width, the width is used for the image, and there ist no string width. I ran into the same problem. Try for testing an Number for the width at the image part:
... columns: [{
width: 100,
image: './images/knowhowlogo.png'
}
.....

[ocastx]

I have the same problem. Checked the code and found the root cause where NaN is generated:

In the src/docMeasure.js the function measureImage function tries to calculate the size of the image by the given sizes of the image. But both the node.width and imageSize.width is defined as "20%". The code doesn't check for any width strings and tries to calculate the width size value in the following lines which generates the NaN and throws an error in the PDFKit library

node._width = node._minWidth = node._maxWidth = node.width || imageSize.width
node._height = node.height || (imageSize.height * node._width / imageSize.width);

As there is no available width given in the function it is actually not possible to calculate the correct percentage of the available width. It has to be preprocessed.

I didn't have time to find the right part of the code where preprocessing of the width values happen except for the lines in columnCalculator.js where the percentage values are converted to numbers in line 27.

[chalangr12]

you can't reference the files using the file path, you have to convert them to base64. See Below

{
    image: 'data:image/png;base64,' + require('fs').readFileSync(path.resolve(__dirname,'images','logo.png')).toString('base64'),
    height: 100,
    width: 100
}

apologies for the crappy styling if it is not up to github community standards, first comment here.

[ishulev]

@chalangr12
Just using image: path.resolve(__dirname,'images','logo.png') should suffice :) No need for encoding.

[Lietsaki]

@7samurai Solved it for me. Incredible that this gotcha is not documented.