javascript - 如何从数据表列图像打印或转换为 PDF
问题描述
我想以如下格式导出数据表
------------------------------------
sr | id | name | phone | photo
------------------------------------
1 | s12 | John | 9874563210 | Image
-------------------------------------
像这样:
HTML 代码:
<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>
如果照片不可用,onError="this.onerror=null;
则将显示占位符。
我的 JavaScript 代码是:
<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>
当我导出表格时,照片列仍然为空。但是图像显示在数据表中。我想在我的导出文件 (PDF) 中显示所有图像。我正在使用 datatables.net 库。
解决方案
我现在可以使用https://printjs.crabbly.com/库解决此图像打印问题。这很容易实现。
首先,我们需要在页面上包含 Print.js 库。
<script src="print.js"></script>
如果您将使用模态功能,还请在页面上包含 Print.css。
<link rel="stylesheet" type="text/css" href="print.css">
而已。您现在可以在您的页面中使用 Print.js。
在页面上使用按钮,例如
<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>
希望这对其他人也有帮助。
推荐阅读
- vb.net - Office 365 和互操作服务不工作
- android - 协程限制?
- apache-kafka-streams - Kafka Streams 再平衡行为
- c - 使用二分搜索在 0 - 100 之间猜一个人的密码
- java - Java - 来回解析 JSON
- python - 错误“pip”未被识别为内部或外部命令、可运行程序或批处理文件
- c - 在 C 编程中使用 TCP/IP 套接字计算连接到服务器的客户端数
- ios - 如何跟踪 AVPlayerItem 中的字幕和音频变化?
- google-apps-script - 当这张表被复制到新的表时,有没有办法链接一些表数据?
- python - 如何解码字符串中的unicode字符?