javascript - 如何从数据表列图像打印或转换为 PDF

Question

我想导出格式如下的数据表

------------------------------------
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 库。

这是我的 fiddle https://jsfiddle.net/pratapamit/hztfdrs1/14/

Answer 1

我现在可以使用 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>

希望这对其他人也有帮助。