14

クーポンを生成するページがあります。各クーポンはdiv、内容によって高さが異なります。各ページにできるだけ多くのクーポンを印刷したいのですが、クーポンを複数のページに分割したくありません。CSS プロパティpage-break-insideはまさに私が必要としているものです。ただし、これは Firefox や Chrome で動作する必要があります。これはサポートされていません。2 年前と1 年前に同じ質問がされましたが、これに対する適切な代替案はありませんでした。私たちはCSS3 / HTML5 /全体的なブラウザ開発をさらに進めています...これを機能させるための代替手段はありますか?

例はこちら: http://jsfiddle.net/e3U66/2/

印刷時のページのサイズが 1000px であるとします。2 番目の DIV を 2 番目のページに表示する必要があります。このコードは Opera では機能しますが、FF や Chrome では機能しません。

4

4 に答える 4

4

ページにコンテンツが読み込まれた後、js を使用してコンテンツをスクロールし、divs の高さを合計します。

到達したら1000px、またはページの高さであると判断した場合は、最新の div の前に でdivスタイル設定された空白を挿入します。page-break-before

于 2011-06-25T21:16:23.810 に答える
1

プロトタイプ（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 の float left を設定し、幅を 100% に設定します。私はそれを試したことはありません., それはうまくいくかもしれません.

于 2011-06-24T19:18:21.167 に答える