How to display image from data in column

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.

[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’); }