如何使用 window.print() 作为图像在 div 标签内打印数据

Posted 2023-02-24

【中文标题】如何使用 window.print() 作为图像在 div 标签内打印数据

【英文标题】：how to print a data inside a div tag using window.print() as a image

【发布时间】：2020-11-06 09:22:12

【问题描述】：

我在 div 标签中有这样的数据，我使用 php 从 mysql 获取数据并使用这样的除法标签填充数据。

问题是我想将此数据打印为图像显示，但是，我没有得到想要的打印，但我得到了这样的打印，

所以我正在尝试将 div 标签打印为图像以获得这样的打印效果

**Code that i am using to print**
**print.php**
<div>
<button class="btn btn--radius-2 btn--blue" onclick="printDiv('printableTable')">Print</button>
                <div>
                    <div>
                        <div class="row" id="printableTable">
                            <?php

                            if (mysqli_num_rows($result) > 0) 
                                while ($row = mysqli_fetch_assoc($result)) 
                            ?>
                            <div class="col-md-4" style="background-color:white;height: 180px;">
                                <p>--------------------------------------------------------------</p>
                                <p><u><?php echo $row['ID'] ?></u></p>
                                <p>
                                    <b><?php echo $row['Fullname'] ?></b>
                                </p>
                                <?php echo $row['Address'] ?>
                                <p><?php echo $row['EmailId'] ?></p>
                                
                            </div>
                            <?php
                                
                            
                            ?>

                        </div>
**print.js**

function printDiv(divName) 
    var printContents = document.getElementById(divName).innerhtml;
    var originalContents = document.body.innerHTML;

    document.body.innerHTML = printContents;

    window.print();

    document.body.innerHTML = originalContents;

欢迎提出任何建议，我只需将这些完整数据打印在一张 a4 纸上。

【问题讨论】：

制作仅用于打印的样式表。

@Teemu 如果您有任何示例来为 div 标签创建样式表，知道我没有得到想要的打印，我得到了像图像 2 一样的 div 打印，它在另一个不像图像3.

@Teemu 现在我正在循环中使用 div 标签打印数据，并使用引导程序设置行。如果我想打印那个 div，我会得到 1 个 div 一个接一个，就像一列中的 1 x 1

【参考方案1】：

打印的功能不是问题，它是您为打印指定的CSS。那就是你没有 CSS 布局，所以布局与屏幕 CSS 一起使用。

将此添加到您的

<link rel="stylesheet" media="print" href="print.css" />

然后，在 print.css 中，更改 col-md-4 的定义，使其按您的意愿流动。

【讨论】：

div 流的 print.css 示例