Image not showing when generating pdf in angularjs using pdfmake

Question

I'm using pdfmake, a nice pdf printing library in javascript to generate pdf in my angularjs SPA. Everything is working fine when I'm using only texts. The pdf is showing correctly with all texts in place. But it isn't working for me when I'm trying to show images. No error, no empty pdf, just nothing happens. There's no 404 either.

Here's the code I'm trying right now,

var dd = {
        content: [
            {
                image: 'picture13438908025659.jpg'
            },
            {
                text: 'Patient\'s Detail', fontSize: 18, bold: true
            },
            {
                columns: [
                    {
                        text: 'Patient\'s ID: ' + $scope.prescription.Patient[0].id, bold: false
                    },
                    {
                        text: 'Name: ' + $scope.prescription.Patient[0].name, bold: false
                    },
                    {
                        text: 'Age: ' + $scope.prescription.Patient[0].age, bold: false
                    },
                    {
                        text: 'Contact: ' + $scope.prescription.Patient[0].contact, bold: false
                    }
                ]

            },
            {
                text: 'Address: ' + $scope.prescription.Patient[0].address, bold: false
            }
        ]
    }

As per the documentation on pdfmake (https://github.com/bpampuch/pdfmake#images) it's recommended to use dataURI images. Did you already try that ? — AardVark71, Apr 15 '15 at 07:57

score 6 · Accepted Answer · answered Apr 09 '16 at 09:31

6

Its Simple,

1) Convert your Image into base64 here

2) copy your base64 code and replace into ,

image : 'base64', // use your base64 instead image.jpg

3) Done. this method is if your image is not worked by link means use base64 instead

answered Apr 09 '16 at 09:31

Mohideen bin Mohammed

18,813
10
112
118

score 2 · Answer 2 · edited Mar 28 '17 at 04:46

You can easily convert any image into base64 format, which is preferred according to docs. Here is a 100% working code:

function convertImgToBase64URL(url, callback, outputFormat){
    var canvas = document.createElement('CANVAS'),
    ctx = canvas.getContext('2d'),
    img = new Image;
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var dataURL;
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null; 
    };
img.src = url;
}

After this you simply mention it in your pdf creating code

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...'
    }]

hi markkillah, i used the above code and its working fine with smaller size image (size < 100 kb) but when i use large images in size (> 100 kb) then pdfMake doesnot show images in pdf and also there is no error present in console. — Ravindra Vairagi, Oct 06 '16 at 10:24

score 1 · Answer 3 · answered Jan 02 '21 at 15:21

You first need to convert your image into base64 and then you can use it in image property, Like this

{
  image: 'data:image/jpeg;base64,...encodedContent...',
  width: 75,
  height: 75,
  alignment : 'left'
}

Here is a Reference - https://pdfmake.github.io/docs/0.1/document-definition-object/images/

score 0 · Answer 4 · answered Aug 16 '15 at 17:09

Can you add width:your_required_width in the image object and check if that works? It happened to me too and what I found out was the image resolution was too big and PDFMake just showed the image in the original size which can't fit the standard size paper. For future use the PDFMake playground to create your document definition objects, it's very handy.

Image not showing when generating pdf in angularjs using pdfmake

4 Answers4

Linked