Question

我有一个生成优惠券的页面。每张优惠券均为div，其高度根据内容而有所不同。我想在每个页面上打印尽可能多的优惠券，但我不希望优惠券分成几页。 CSS属性page-break-inside完全符合我的需要。但是，我需要这个适用于Firefox和/或Chrome。并且this is not supported。 Two years和one year ago提出了同样的问题，而且没有其他好的选择。我们进一步开发了很多CSS3 / HTML5 /整体浏览器......有没有其他方法可以让它工作？

示例在这里： http://jsfiddle.net/e3U66/2/

假设页面在打印时测量为1000px。我希望第二个DIV出现在第二页上，否则它会在第一页和第二页上分开。此代码适用于Opera，但不适用于FF或Chrome。

Answer 1

为什么不在页面加载了您的内容后，使用js滚动内容并添加div的高度。

到达1000px或您已确定为页面高度的任何内容后，请在最新的div之前插入一个div空白样式page-break-before。

Answer 2

在Prototype（1.7）库的帮助下制作解决方案

<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
//page height in px
//thisPageTotal is the total of pixels on the current page, in px
pageHeight = 1000;
thisPageTotal = 0;

Event.observe(window, 'load', function(){
    $$('.coupon').each(function(el){
        var layout = el.getLayout();
        thisPageTotal += parseInt(layout.get('margin-box-height'));
        if(thisPageTotal > pageHeight) {
            thisPageTotal = parseInt(layout.get('margin-box-height'));
            var pageBreak = new Element('div', {
                'class': 'pagebreak'
            });
            el.insert({before: pageBreak});
        }
        //this shows the current amount of px on the current page
        el.update(thisPageTotal);
    });
});
</script>

<style type="text/css">
div {
    border: 1px solid #000;
    margin: 30px;
}

.pagebreak {
    page-break-after: always;   
}
</style>
</head>

<body>
    <div id="div_1" class="coupon" style="height: 500px"></div>
    <div id="div_2" class="coupon" style="height: 200px"></div>
    <div id="div_3" class="coupon" style="height: 500px"></div>
    <div id="div_4" class="coupon" style="height: 200px"></div>
    <div id="div_5" class="coupon" style="height: 200px"></div>
    <div id="div_6" class="coupon" style="height: 400px"></div>
    <div id="div_7" class="coupon" style="height: 300px"></div>
    <div id="div_8" class="coupon" style="height: 400px"></div>
    <div id="div_9" class="coupon" style="height: 500px"></div>
    <div id="div_10" class="coupon" style="height: 200px"></div>
</body>
</html>

也许有帮助

Answer 3

老实说，我只是建议创建实际优惠券的图像或生成PDF格式。我假设您可能已经为所有优惠券生成条形码，因此生成实际图像不应该是使用PHP（或任何代码选择可能）的硬编码。

以下是关于php图像创建的一些信息，但是SO可能是更好的示例源。

http://php.net/manual/en/function.imagecreate.php

然后你可以列出图像。

<img src>
<img src>
<img src>
...

没有意义重建轮子。

Answer 4

为这些div设置float left并将width设置为100％。我不会尝试它。它可能会起作用。

分页内容的替代方法：避免

4 个答案: