How to print or convert to PDF from datatables column images

Viewed 964

I want to export a datatables in format like

------------------------------------
sr | id  | name |  phone     |  photo
------------------------------------
1  | s12 | John | 9874563210 | Image 
-------------------------------------

Like this:

enter image description here

HTML code:

<table id="example23" class="display nowrap" cellspacing="0" width="100%">
<thead>
 <tr>
  <th>Sr. No</th>
  <th>id</th>
  <th>Name</th>
  <th>Phone Number</th>
  <th>Photo</th>
 </tr>
</thead>
<tbody>
<?php 
$sr=0;
$sql = "SELECT * FROM `user` ORDER BY `name ASC ";
$result = mysqli_query ($connect, $SQL);
if (mysqli_num_rows ($result) > 0) {
while ($fieldinfo=mysqli_fetch_object ($result)
{
 $sid=$fieldinfo->sid;
 $name=$fieldinfo->name;
 $phone=$fieldinfo->phone;
 $photo = $fieldinfo->photo;
 $sr=$sr+1;
?>
 <tr>
  <td><?PHP echo $sr?></td>
  <td><?PHP echo $sid?></td>
  <td><?PHP echo $name?></td>
  <td><?PHP echo $phone?></td>
  <td><img src="upload/photo/<?PHP echo $photo;?>" onError="this.onerror=null;this.src='images/placeholder.png';" style="height: 80px;"></td>
 </tr>
<?PHP }?>
</tbody>
</table>

If photo is not available then onError="this.onerror=null; will display placeholder.

My JavaScript code is:

    <script>
        $('#example23').DataTable({
            dom: 'Bfrtip',
            buttons: [
                {
                  extend: 'copy',
                  title: 'Result for <?php echo $_SESSION["pd_name"]?>'
                },  
                {
                  extend: 'excel',
                  title: 'Result for <?php echo $_SESSION["pd_name"]?>'
                }, 
                {
                  extend: 'pdf',
                  title: 'Result for <?php echo $_SESSION["pd_name"]?>'
                }, 
                {
                  extend: 'print',
                  title: 'Result for <?php echo $_SESSION["pd_name"]?>'
                }
            ],
            "pageLength": 50,
            "oLanguage": {
              "sSearch": "Quick Search / Sorting: "
            }
        });

        </script>

When I export my table, the photo column remains empty. But images are displaying in datatables. I want to display all images in my exported file (PDF). I am using datatables.net libraries.

Here is my Fiddle https://jsfiddle.net/pratapamit/hztfdrs1/14/

1 Answers

I am now able to solve this image print using https://printjs.crabbly.com/ library. It is very easy to implement.

First we need to include the Print.js library on the page.

 <script src="print.js"></script>

If you will use the modal feature, also include Print.css on the page.

<link rel="stylesheet" type="text/css" href="print.css"> 

That's it. You can now use Print.js in your pages.

Use button on page like

<button type="button" class="dt-button buttons-print" onclick="printJS({ printable: 'table_print', type: 'html', header: 'Title' })">Print</button>
<div class="table-responsive" id="table_print">
<!-- Your Table here -->
</div>

Hope this will help others as well.

Related