我有一个产品列表，每个产品都有一个这样的复选框:
我的任务是以横向模式打印选定的产品(由用户选择，所以我永远不知道要打印多少)。为此，我可以使用 CSS、JavaScript、jQuery(任何插件)和 PHP。
结果需要是这样的:
我有一个情况，因为有些产品的描述(或其他元素)的长度是原来的两倍，而且它在第二页打印:(
我的问题:
- 我正在使用
@media print{ @page {size: landscape} }，我应该使用 CSS2 还是 CSS3，或者响应式表格？ (如果有 3 种产品，我需要 3 列，如果有 1 种，则需要 2 列，否则只需要 1 列)。 - 你知道这种情况的算法吗？
- 如果不是，当产品有太多元素(太长)时，我什么时候应该使用分页符？
请问您对这个谜团有什么建议吗？我正在做这样的事情:
@media all {
.page-break { display: none; }
}
@media print {
.page-break { display: block; page-break-before: always; }
}
<h1>Page Title</h1>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
<!-- content -->
但是如果我的专栏太长，什么时候分页呢？
最佳答案
由于您不知道用户会选择哪些产品，因此您必须使用 JavaScript 动态添加分页符，并在每次客户选择/取消选择产品时解析文档，以便它们仍然适合随心所欲。
一种方法:
最初每个产品后会有一个分隔符 div(带分页符)，它会被隐藏。
<h1>Page Title</h1> <!-- product block --> <div class="page-break"></div> <!-- product block --> <div class="page-break"></div> <!-- product block --> <div class="page-break"></div> <!-- product block --> <div class="page-break"></div> <!-- product block --> <div class="page-break"></div> <!-- content -->每次用户选中/取消选中一个产品时:
隐藏所有可见的分隔符(如果有的话)。您可以通过使用 JavaScript 添加/删除
visible类来完成此操作。该类将像这样定义:@media all { .page-break { display: none; } } @media print { .page-break.visible { display: block; page-break-after: always; } }遍历产品列表以查看选择了哪一个。
- 在每 3 个选定元素之后，获取下一个分隔符并向其添加
visible类。
这是一个简单的演示，展示了它是如何工作的:
<!doctype html>
<html>
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<style type="text/css">
* { margin:0; padding:0; border:0; }
.product { width:30%; display:inline-block; }
.separator { page-break-after:always; display:none; }
@media print {
.separator.visible { display: block; page-break-after: always; }
.product { display:none; }
.product.visible { display:inline-block; }
}
</style>
<script>
function recalculateSeparators() {
var x = 0;
// reset the print visibility
$(".separator").removeClass("visible");
$(".product").removeClass("visible");
// traverse the list of products
$(".product").each(function() {
// if the checkbox is selected for that product
if ($(this).find("input:checked").length) {
// indicate that the product will be visible for print
$(this).addClass("visible");
// if it's the third element, make the next separator visible too
if (++x % 3 == 0) {
$(this).next(".separator").addClass("visible");
}
}
});
}
</script>
</head>
<body>
<div class="product"><input type="checkbox" onclick="recalculateSeparators()" /> Product A</div>
<div class="separator"></div>
<div class="product"><input type="checkbox" onclick="recalculateSeparators()" /> Product B</div>
<div class="separator"></div>
<div class="product"><input type="checkbox" onclick="recalculateSeparators()" /> Product C</div>
<div class="separator"></div>
<div class="product"><input type="checkbox" onclick="recalculateSeparators()" /> Product D</div>
<div class="separator"></div>
<div class="product"><input type="checkbox" onclick="recalculateSeparators()" /> Product E</div>
<div class="separator"></div>
<div class="product"><input type="checkbox" onclick="recalculateSeparators()" /> Product F</div>
<div class="separator"></div>
<div class="product"><input type="checkbox" onclick="recalculateSeparators()" /> Product G</div>
<div class="separator"></div>
<div class="product"><input type="checkbox" onclick="recalculateSeparators()" /> Product H</div>
<div class="separator"></div>
<div class="product"><input type="checkbox" onclick="recalculateSeparators()" /> Product I</div>
<div class="separator"></div>
<div class="product"><input type="checkbox" onclick="recalculateSeparators()" /> Product J</div>
<div class="separator"></div>
<div class="product"><input type="checkbox" onclick="recalculateSeparators()" /> Product K</div>
<div class="separator"></div>
<div class="product"><input type="checkbox" onclick="recalculateSeparators()" /> Product L</div>
<div class="separator"></div>
</body>
</html>
关于javascript - 以横向模式打印页面时在哪里分页？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31560028/