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脚本$_POST['records']中自动获取一个数组print.php，其中包含所选记录的所有值。（请注意，这仅适用于所有复选框的名称相同且以[]结尾）

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中测试了它（其中伪类：已检查导致所需结果而不是属性选择器），并且仅适用于支持css3和selector的新版本浏览器。

Answer 2

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

仅打印页面上的选定项目

2 个答案: