Image not showing when generating pdf in angularjs using pdfmake

问题

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

回答1:

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

回答2:

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

回答3:

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.

来源：https://stackoverflow.com/questions/28647253/image-not-showing-when-generating-pdf-in-angularjs-using-pdfmake

标签

javascript

angularjs

pdf

pdfmake