如何解决将 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。