I created a data table with PDF and print buttons, but I am facing an issue where the images in the table are not visible in the PDF or print view. Although I have attached logos to the data table that are visible in the PDF and print view, the existing images or Font Awesome icons are not showing up.
HTML
<table id="example" class="display responsive nowrap" style="width:100%" data-page-length='3'>
<thead>
<tr>
<th>Data</th>
<th>Data</th>
<th>Data</th>
<th>Data</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td><img src="./edit.png" class="edit-icon"></td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td><img src="./edit.png" class="edit-icon"></td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td><img src="./edit.png" class="edit-icon"></td>
</tr>
</tbody>
</table>
JS
<script>
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Blfrtip',
buttons: [
{
extend: 'pdfHtml5',
customize: function ( doc ) {
doc.content.splice( 1, 0, {
margin: [ 0, 0, 0, 12 ],
alignment: 'center',
image: 'IMAGE DATA'
} );
}
},
{
extend: 'print',
customize: function ( win ) {
$(win.document.body).prepend('<img src="image.png"');
}
},
'copy', 'csv', 'excel'
]
} );
} );
</script>
CSS
@media print {
#example {
margin-top: 100px;
}
.edit-icon {
background: url(edit.png);
width: 25px;
height: 25px;
padding: 5px;
border-radius: 4px;
display: block;
}
}
CSS Links
<!-- Data Table & Data Table Buttons -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.3.5/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/jszip-2.5.0/dt-1.13.2/af-2.5.2/b-2.3.4/b-html5-2.3.4/b-print-2.3.4/cr-1.6.1/date-1.3.0/fc-4.2.1/kt-2.8.1/r-2.4.0/rg-1.3.0/rr-1.3.2/sc-2.1.0/sb-1.4.0/sp-2.1.1/sl-1.6.0/sr-1.2.1/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/jq-3.6.0/jszip-2.5.0/dt-1.13.2/af-2.5.2/b-2.3.4/b-html5-2.3.4...
JS Plugins
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.5/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.5/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsi...
How can I ensure that the icons/images are printed as well?
See HTML view of the DataTable https://i.sstatic.net/9su3x.jpg