Export HTML DataTable to Excel - Display URL to Image in Excel

Question

I'm trying to display an HTML DataTables URL to the actual image in an Excel column.

Right now, when I export the DataTable to Excel it populates the corresponding column with the URL itself, what I want to achieve is to actually populate the Excel column with the Image, not the Image URL.

Right now, I can see the image for the comment.screenshot variable into HTML, but in Excel, it is blank, while for the rest of comment.screenshot1,comment.screenshot2 and comment.screenshot3, only the URL is populated in Excel.

jQuery:

$("#tableComments").DataTable({
            stripHtml: !1,
            dom: "Bfrtip",
            buttons: ["copyHtml5", "excelHtml5", "csvHtml5", "pdfHtml5"]
        })

HTML:

<table id="tableComments" class="display table table-info table-striped">
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Version</th>
                                <th>Round</th>
                                <th>Comment</th>
                                <th>Screenshot #1</th>
                                <th>Screenshot #2</th>
                                <th>Screenshot #3</th>
                                <th>Screenshot #4</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for comment in comments %}
                            <tr>
                                
                                    <td>{{ comment.user.username }}</td>
                                    <td>{{ comment.versionName }}</td>
                                    <td>{{ comment.round }}</td>
                                    <td>{{ comment.comment }}</td>
                                    <td><img src="{{ comment.screenshot }}" /></td>
                                    <td>{{ comment.screenshot1 }}</td>
                                    <td>{{ comment.screenshot2 }}</td>
                                    <td>{{ comment.screenshot3 }}</td>
                                    <td>{{ comment.approved }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                      </table>

I highly appreciate your help!

Answer 1

Instead of Datatables export buttons you may use a different approach using encodeURIComponent:

The snippet:

$("#tableComments").DataTable({
  stripHtml: !1,
  dom: 'Bfrtip',
  buttons: ['copyHtml5', 'csvHtml5', 'pdfHtml5']
})
$('button').on('click', function(e) {
  window.open('data:application/vnd.ms-excel,' + encodeURIComponent( document.getElementById('tableComments').outerHTML));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.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/1.6.5/js/buttons.html5.min.js"></script>

<button>Export To Excel</button>
<table id="tableComments" class="display table table-info table-striped">
    <thead>
    <tr>
        <th>User</th>
        <th>Version</th>
        <th>Round</th>
        <th>Comment</th>
        <th>Screenshot #1</th>
        <th>Screenshot #2</th>
        <th>Screenshot #3</th>
        <th>Screenshot #4</th>
        <th>Status</th>
    </tr>
    </thead>
    <tbody>
    <tr>

        <td>username1</td>
        <td>versionName</td>
        <td>round</td>
        <td>comment </td>
        <td><img src="https://dummyimage.com/100x100/000/fff&text=1"/></td>
        <td>screenshot1</td>
        <td>screenshot2</td>
        <td>screenshot3</td>
        <td>approved</td>
    </tr>
    <tr>

        <td>username2</td>
        <td>versionName</td>
        <td>round</td>
        <td>comment </td>
        <td><img src="https://dummyimage.com/100x100/000/fff&text=2"/></td>
        <td>screenshot1</td>
        <td>screenshot2</td>
        <td>screenshot3</td>
        <td>approved</td>
    </tr>
    <tr>

        <td>username3</td>
        <td>versionName</td>
        <td>round</td>
        <td>comment </td>
        <td><img src="https://dummyimage.com/100x100/000/fff&text=3"/></td>
        <td>screenshot1</td>
        <td>screenshot2</td>
        <td>screenshot3</td>
        <td>approved</td>
    </tr>
    </tbody>
</table>