PDF export images from each row

PDF export images from each row

toutotouto Posts: 3Questions: 1Answers: 0

Hi,

I'd like to export the PDF with the images that are in the first column of every row in my table. Based on the information I have found, I managed to display one image from the table (it's the image from the last row). So it is not looping through every row when exporting - just selecting the last image.

If anyone could provide any help, it would be greatly appreciated!

Here is how my code is structured:

Images in table / base64

            $path = $image; //this is the image path
            $type = pathinfo($path, PATHINFO_EXTENSION);
            $data = file_get_contents($path);
            $base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

            echo '<td >
              <img class="img-fluid" src="'.$base64.'" style="max-height:100px;"></td>'; 
              //every image is displayed correctly in my table

Options

          buttons: [
          {
           extend: 'pdfHtml5',
           orientation: 'portrait',

           customize: function ( doc ) {
            if (doc) {
                        for (var i = 1; i < doc.content[1].table.body.length; i++) {
                           doc.content[1].table.body[i][0] = {
                                image: '<?php echo $base64;  ?>', //this doesn't work, as only 1 image is shown in PDF
                                width: 100,
                            };
                        }
                    }
                },
           exportOptions: {
               stripHtml: false,
               columns: ':visible',
               search: 'applied',
               order: 'applied'
          }

         }
         ]

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin
     '<?php echo $base64;  ?>'
    

    That is PHP - it is only rendered at the server. But your loop in in Javascript.

    You would need to convert the image to base64 in Javascript or already have the base64 code in the table which you can use.

    Allan

  • toutotouto Posts: 3Questions: 1Answers: 0

    I found a half solution - it works when you export all rows, however, not with row select. So still need to integrate this now with row select...

         customize: function(doc) {
                //find paths of all images, already in base64 format
                var arr2 = $('.img-fluid').map(function(){
                               return this.src;
                          }).get();
    
              for (var i = 0, c = 1; i < arr2.length; i++, c++) {
                                doc.content[1].table.body[c][0] = {
                                  image: arr2[i],
                                  width: 100
                                }
                                  }
              },
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    You could possibly try something like

    if (table.rows({selected: true}).count() == 0) {
     // nothing selected, so do your current code
    }
    else {
      var arr2 = $('tr.selected .img-fluid').map(function(){
                          return this.src;
                     }).get();
    
     // then your for loop
    }
    

    That might do the trick,

    Colin

  • toutotouto Posts: 3Questions: 1Answers: 0

    Yes perfect, now it works - thanks!

  • dpkkmdpkkm Posts: 4Questions: 1Answers: 0

    i want to export table with each row of source image to excel and and print;
    please send button code of excel and print.
    please help me

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    @dpkkm Have you tried suggestions in this thread - also this one here?

    If you have, and still no success, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • berffberff Posts: 1Questions: 0Answers: 0

    Hi,
    I am exactly want to the same thing with @touto. I am using Asp.net core mvc framework. Images are registered in the database with their names and extensions. I did as in the screenshot below when taking pictures to a datatable. I know I need to convert it to base64 string when exporting to PDF, but I couldn't do it.

    Controller class

    html

    js

    Should I change the database with base64string format of the images ?

    Thank you in advance :)

    Cheers,
    Berff

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Do the images appear in the table? And just not in the export? We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

Sign In or Register to comment.