14

我有一个生成优惠券的页面。每张优惠券都是div一个高度根据内容而变化的。我想在每页上打印尽可能多的优惠券，但我不希望将优惠券分成几页。CSS 属性page-break-inside正是我需要的。但是，我需要它才能为 Firefox 和/或 Chrome 工作。这不受支持。两年前和一年前问过同样的问题，对此没有好的选择。我们进一步进行了很多 CSS3/HTML5/整体浏览器开发……有没有其他方法可以让它工作？

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

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

4

4 回答 4

4

为什么不呢，页面加载完你的内容后，用js滚动浏览内容，把s的高度加起来div。

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

于 2011-06-25T21:16:23.810 回答
1

下面是在 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>

也许它有帮助

于 2011-06-29T12:08:17.380 回答
0

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

这是有关 php 图像创建的一些信息，但 SO 可能是更好的示例来源。

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

然后你可以只列出图像。

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

重新创建轮子没有任何意义。

于 2011-06-25T22:10:38.380 回答
-2

为这些 div 设置向左浮动并将宽度设置为 100%。我不会尝试它。它可能会工作。

于 2011-06-24T19:18:21.167 回答