Альтернатива для разрыва страницы: избегать - PullRequest
Новая
       15

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

14 голосов
/ 24 мая 2011

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

Пример здесь: http://jsfiddle.net/e3U66/2/

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

Ответы [ 4 ]

3 голосов
/ 26 июня 2011

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

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

1 голос
/ 29 июня 2011

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

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

0 голосов
/ 26 июня 2011

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

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

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

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

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

Нет никакого смысла в этомвоссоздавая колесо.

0 голосов
/ 24 июня 2011

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

...