Jspdf-autotable: How to display image from data in column

[sciefylab]

Hi Man,
I have an image in column, how to show it?

this is :
var doc = new jsPDF('p', 'pt','letter');
var elem = document.getElementById("tbl-customers");
var res = doc.autoTableHtmlToJson(elem);
doc.autoTable(res.columns, res.data, {

      drawRow: function (row, data) {
       var logo = row.index === 7;
       var Imgpath = '$baseurl/upload/'+ logo;

        if (row.index === 7) {                           
          doc.addImage(Imgpath, 'JPEG', data.settings.margin.left, 40, 25, 25);
        }
      }


    });
    doc.save("table.pdf"); 

please help, thanks

[simonbengtsson]

It can be done something like this. Here is a working codepen. Note that I used src="datauri" in the html, but it should work with normal urls as well as long as they are local.

function generate() {
  var doc = new jsPDF('p', 'pt');

  var elem = document.getElementById('table');
  var imgElements = document.querySelectorAll('#table tbody img');
  var data = doc.autoTableHtmlToJson(elem);
  var images = [];
  doc.autoTable(data.columns, data.rows, {
    bodyStyles: {rowHeight: 30},
    drawCell: function(cell, opts) {
      if (opts.column.dataKey === 5) {
        var img = imgElements[opts.row.index];
        images.push({
          elem: img,
          x: cell.textPos.x,
          y: cell.textPos.y
        });
      }
    },
    afterPageContent: function() {
      for (var i = 0; i < images.length; i++) {
        doc.addImage(images[i].elem, 'jpg', images[i].x, images[i].y);
      }
    }
  });

  doc.save("table.pdf");
}

I realized while writing this that the hooks system needs some work to be user friendly. I also found a bug that meant that I had to add the images in the afterPageContent hook instead of directly in drawCell as it otherwise got hidden below the table.

[simonbengtsson]

Feel free to reopen if you have further issues.

[sciefylab]

thanks man,
but i have error console

Uncaught TypeError: Cannot read property 'length' of undefined

   var doc = new jsPDF('p', 'pt','letter');
    var elem = document.getElementById('tbl-customers');
    var imgElements = document.querySelectorAll('#tbl-customers tbody img');
    var data = doc.autoTableHtmlToJson(elem);      
    var images = [];
     doc.autoTable(data.columns, data.rows, {
      bodyStyles: {rowHeight: 30},
      drawCell: function(cell, opts) {
        if (opts.column.dataKey === 7) {
          var img = imgElements[opts.row.index];
          images.push({
            elem: img,
            x: cell.textPos.x,
            y: cell.textPos.y
          });
        }
      },
      afterPageContent: function() {
        for (var i = 0; i < images.length; i++) {
          doc.addImage(images[i].elem, 'jpg', images[i].x, images[i].y);
        }
      }
  });
    doc.save("table.pdf"); 

please helps, thanks

[harshalkolhe05]

var imgElements ="data:image/jpeg;base64,/9j/4AAQSkZ";
var images = [];
var i = 0;

doc.autoTable(res1.columns, res1.data, {

    theme : 'plain',
    startY : 30,
    pageBreak : 'avoid',

    styles : {
        overflow : 'linebreak',
        fontSize : 12,
        rowHeight : 15,
        fontStyle : 'bold',
        columnWidth : 'wrap',
        halign : 'center', // left, center, right
        valign : 'middle' // top, middle, bott

    },
    columnStyles : {
        1 : {
            columnWidth : 'auto'
        }
    }, 
    didDrawCell: function(cell, opts) 
     {
          if (opts.column.dataKey === 5) 
          {
            images.push({
              url: imgElements[i].src,
              x: cell.textPos.x,
              y: cell.textPos.y
            });
            i++;
          }
        },
        addPageContent: function() {
          for (var i = 0; i < images.length; i++) {
            doc.addImage(images[i].url, images[i].x, images[i].y, 200, 200);
          }
        }




});

this is my code but image is not Display

[simonbengtsson]

For reference, this is a lot easier now with v3: https://stackoverflow.com/questions/40465155/how-to-get-table-row-image-in-pdf-using-jspdf

[yadavmohan]

Hi simonbengtsson,
How can i show dynamic image & data in pdf if i have data in array format
currently it will generate the imageUrl in pdf
sample dynamic data
responseHeader :
[['No','avatarImage','rationNo','color']]

responseData
0:['1','https://www.w3schools.com/howto/img_avatar.png','3455','red']
1:['12','https://www.w3schools.com/howto/img_avatar.png','34','blue']

generategeneratePdf (responseHeader,responseData)

const generatePdf = (responseHeader,responseData) => {
const doc = new jsPDF('p','pt');
doc.autoTable({
head: responseHeader,
body: responseData,
})
doc.save('table.pdf');
}