仅打印页面上的选定项目答案

【问题标题】：Print only selected items on a page仅打印页面上的选定项目
【发布时间】：2012-04-08 00:21:11
【问题描述】：

有人要求我为动态生成的页面提供一些棘手的打印功能。该页面将显示每条记录以及一个复选框。然后是页面底部的一个打印按钮。这个想法是让用户选中他们要打印的每条记录旁边的框，然后当他们单击页面底部的打印按钮时，只会打印那些被选中的记录。

我假设需要 CSS 和 Javascript 的某种组合，但我真的不知道。有任何想法吗？提前致谢！

【问题讨论】：

打印按钮是否重定向到另一个页面？或者它调用 window.print() ？

标签： php javascript css checkbox

【解决方案1】：

PHP 解决方案

如果你有类似的东西

<form method="post" action="print.php">
  <p>Select the records to be printed</p>
  <p>
    <input type="checkbox" name="records[]" value="1"><div class="record">Record 1</div><br>
    <input type="checkbox" name="records[]" value="2"><div class="record">Record 2</div><br>
    <input type="checkbox" name="records[]" value="3"><div class="record">Record 3</div>
  </p>
</form>

您将在 php 脚本print.php 中自动获得一个数组$_POST['records']，其中包含所选记录的所有值。（请注意，这仅适用于所有复选框的名称相同且以[] 结尾的情况）

然后 php 脚本可以执行以下操作：

<?php
foreach ($record in $_POST['records']) {
    // fetch the record with id $record from the database (or similar)
    // print this record to the page
}
echo "<script>window.print();</script>"; // or put that into the onload attribute of the body tag
?>

JavaScript 和 CSS

另一个有效的可能性是通过 javascript 来完成整个事情。因此，如果在单击打印按钮时选中了每个复选框，然后删除或隐藏所有未选中的记录，则必须选中每个复选框。

css 属性media 也是一个有用的东西，您可以使用它定义仅适用于某些设备的额外样式。除了打印按钮中的 onclick="window.print()" 属性之外，此代码无需任何 javascript 即可完成所有操作：

@media print {
    input{
        display: none;  /* hides all input elements for the printer */
    }
    .record {
        display: none;  /* hide all records by default */
    }
    input[checked] + .record, input:checked + div.record {
        /* display all that are immediately preceeded by a input with checked attribute */
        display: block;  
    }
}

请注意，我仅在 Safari 中对其进行了测试（其中伪类 :checked 导致想要的结果而不是属性选择器）并且仅适用于支持 css3 和 selector 的较新版本的浏览器。

【讨论】：

【解决方案2】：

创建一个print.php，向其发布表单（带有选中的复选框） - 该页面将仅显示您希望它在打印中显示的选定内容，然后调用 javascript window.print() onload。

【讨论】：