php - 仅打印页面上的选定元素

Question

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

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

Answer 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 的较新版本的浏览器。支持。