Question

我有一个产品列表，每个产品都有一个这样的复选框：

enter image description here

我的任务是在横向模式下打印所选产品（由用户选择，因此我永远不知道要打印多少）。为此，我可以使用CSS，JavaScript，jQuery（任何插件）和PHP。

结果必须是这样的：

enter image description here

我有一种情况，因为有些产品的描述（或其他项目）要长两倍，并且是在第二页打印：（

我的问题：

我正在使用@media print{ @page {size: landscape} }，我应该使用CSS2还是CSS3，还是使用响应表？（如果有3个产品，我需要3列，如果有1个，我需要2列，或者只需要1列）。
你知道这种情况的算法吗？
IF NOT当产品包含太多物品（太长）时，我应该何时使用分页符？

请您对这个谜团有一些建议。我正在做这样的事情：

@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 -->

但是如果我的专栏太长，何时打破页面？

Answer 1

由于您不知道用户将选择哪些产品，您必须使用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 -->

每次用户检查/取消选中一个产品时：
1. 隐藏所有可见分隔符（如果有）。您可以通过使用JavaScript添加/删除visible类来完成此操作。该类定义如下：
```
@media all {
    .page-break { display: none; }
}

@media print {
    .page-break.visible { display: block; page-break-after: always; }
}
```
2. 遍历产品列表以查看选择了哪一个。
3. 在每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>

在横向模式下打印页面时中断页面的位置？

1 个答案: