CODEWITHSUNDEEP
imagepdfamchartsamcharts4
Thomas Carter
Thomas Carter

Reputation: 11

Include images in Amcharts v4 pdf export

I want to add a logo and other images to my Amcharts pdf export. Versions : Php 7 on Ubuntu 16.04, Amcharts 4.

I've followed https://www.amcharts.com/docs/v4/tutorials/generating-multi-content-pdf-export/

I've got titles, text charts and tables. The example doesn't include images but I looked in PDFmake here : https://pdfmake.github.io/docs/document-definition-object/images/

In amCharts tables etc work with blocks like : 

doc.content.push({
  table: {

In PDFMake the syntax is : 

var docDefinition = {
content: [
    {
      layout: 'lightHorizontalLines', // optional
      table: {

and for images :

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',
        },

So I tried :

doc.content.push({
      image: 'sampleImage.jpg',
    });

And put an image named sampleImage.jpg on the server in the same folder as the php file

I expected the image to be added to my report.pdf download but it doesn't work. Any ideas appreciated. Specificaly, what is the right syntax, where should I put the image to include ? I'd like to avoid the hassle of converting the image to: data:image/jpeg format.

Upvotes: 0

Views: 781

Answers (1)

Thomas Carter
Thomas Carter

Reputation: 11

answering my own question :

So looks like you do have to use the format "data:image/jpeg;base64" to include the image in your script. I converted my images with "https://www.base64-image.de/". The result is a block of code like :

data:image/jpeg;base64,/9j/4A... lots of data ... QhCABCEIA//2Q==

You copy this into a js variable like so: 

smiley = 'data:image/jpeg;base64,/9j/4A... lots of data ... QhCABCEIA//2Q==';

And then output it with:

    doc.content.push({
      image: smiley,
      width: 30
    });

To put images into a table I did:

doc.content.push({
  table: {
    headerRows: 1,
    widths: [ "*", "*", "*", "*","*", "*", "*","*", "*", "*" ],
    body: [
      [
        {image: low, width: 30,  colSpan: 3, alignment: 'center'},{ },{ },
        {image: ok, width: 30,  colSpan: 4, alignment: 'center'},{ },{ },{ },
        {image: high, width: 30,  colSpan: 3, alignment: 'center'},{ },{ }

      ],
      [ 
        {text: "<?php echo $final_score_show[1]; ?>",  alignment: 'center'}, 
        ...
      ]
    ]
  }
});

Hope this helps someone. Enjoy !

Upvotes: 1

Related Questions