将 HTML 数据表导出到 Excel - 在 Excel 中显示图像的 URL

问题描述

我正在尝试在 Excel 列中显示指向实际图像的 HTML DataTables URL。

现在，当我将 DataTable 导出到 Excel 时，它会使用 URL 本身填充相应的列，我想要实现的是实际使用图像而不是图像 URL 填充 Excel 列。

现在，我可以在 HTML 中看到 comment.screenshot 变量的图像，但在 Excel 中，它是空白的，而对于 comment.screenshot1、comment.screenshot2 和 comment.screenshot3 的其余部分，只填充了 URL在 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>

非常感谢您的帮助！

解决方法

您可以使用 encodeURIComponent 的不同方法代替数据表导出按钮：

片段：

$("#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>