Альтернатива для разрыва страницы: избегайте

У меня есть страница, которая генерирует купоны. Каждый купон - это div с высотой, изменяющейся в зависимости от содержимого. Я хочу печатать как можно больше купонов на каждой странице, но я не хочу, чтобы купоны были разделены на несколько страниц. Свойство CSS page-break-inside делает именно то, что мне нужно. Однако мне нужно это для работы в Firefox и/или Chrome. И это не поддерживается. Два года и год назад был задан тот же вопрос, и для этого не было хорошей альтернативы. Мы много разрабатываем CSS3/HTML5/общий браузер... есть ли альтернатива, чтобы заставить это работать?

Пример: http://jsfiddle.net/e3U66/2/

Предположим, что страница, при печати, измеряет 1000 пикселей. Я хочу, чтобы второй DIV появился на второй странице, потому что в противном случае он разделяется на первую и вторую. Этот код работает в Opera, но не в FF или Chrome.

Ответ 1

Почему бы не после загрузки страницы содержимого использовать js для прокрутки содержимого и добавления высоты div s.

Как только вы достигнете 1000px или того, что вы определили как высоту страницы, вставьте пустой div стиль page-break-before перед последним div.

Ответ 2

Честно говоря, я бы просто посоветовал создавать изображения фактически купонов или генерировать pdf. Я предполагаю, что вы, вероятно, генерируете штрих-коды для всех купонов уже, поэтому генерация фактически изображений не должна быть сложной с использованием php (или, что бы там ни было, выбор кода).

Вот некоторая информация о создании образа php, но SO, вероятно, будет лучшим источником для примеров.

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

Затем вы можете просто перечислить изображения.

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

Нет смысла воссоздать колесо.

Ответ 3

Ниже решения, сделанного с помощью библиотеки 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>

Возможно, это помогает

Ответ 4

установите float left для этих div и установите ширину как 100%. я не попробовал бы это., он может работать.