Mit Hilfe von CSS und/oder jQuery für Gedruckte Seiten mit Seitenumbrüchen

Ok, ich verbrachte den letzten Tag oder so Bezifferung dieses heraus, so dass ich posten wollte meine Lösung zu diesem Fall, jemand brauchte die Antwort.

Im Allgemeinen hier ist, was ich Tat.

1. Erzeugt die Ausgabe als normale (nicht-Drucker-gedacht)
2. Erstellt 2 style sheets (eine für die Drucker und eine für den Bildschirm). Die Messungen wurden in Zoll (nicht Pixel) für alle Elemente einer Seite gedreht werden, in der gedruckten Ausgabe.
3. Mit jQuery, ich habe die folgenden:

-> aufgerufene Funktion fügt die erste Seite von DOM - so etwas wie dieses

//assumes old_page_id is existing element in DOM, and var page_id = 1;
$j("<div class='page' id='" + page_id + "'><div class='print_area'></div></div>")
.insertAfter('#' + old_page_id);

-> Messen Sie die Höhe des div, dass ist die Seite (in meinem Fall $('.Seite').height(); )

-> lief einer Funktion zu tun, die Insertionen der divs und den neuen Seiten - so etwas wie dieses

$('div_class').each(
 function() {
  //measure height of $(this)
  //add it to running total of used space on existing page
  //if sum total exceeds remaining space, create new page, and add to that one
  //if still room left, add to this one
 }
);

Beachten Sie, dass jede Seite, die div (in meinem Fall, class='page') im Drucker-stylesheet hat diese:

page-break-after: always;

Dies ist, wie ich es geschafft habe eine neue Seite erstellt, auf den Drucker, wo ich wollte.

Nach dem ausführen von jQuery-Funktion oben, versteckte ich die original-Abschnitt enthalten ist, wird die div-Elemente, die ich wollte, um in die gedruckten Seiten. Note, die ich nicht verbergen konnte diesem Abschnitt, bevor die hand, weil mein jQuery-Messungen würde nicht gültige Ergebnisse erzeugen (in meinem Fall platzierte ich alle divs ein div-wrapper mit der id " hide_me', und stellen Sie den Stil auf height:1px; overflow:auto; ).

Ich weiß, das ist sehr 50,000 ft Sicht, aber hoffentlich ist es hilfreich für Sie.

Nicht genau, was Sie suchen, aber haben Sie einen Blick auf diese
http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

Mit einem zusätzlichen Hauch von JS, kann möglich sein, was, die Sie wollen, um zu versuchen zu erreichen.

Den point-of-print-Paginierung, meiner Meinung nach, ist es nicht aufteilen, Dinge schlecht. Und in der Regel, was Sie wollen nicht zu Spalten schlecht ist meistens, tabellarische Daten. Das ist also ein Ansatz geht davon aus, dass Sie sich geändert haben die <div>'s in die Tabelle formatieren und gruppiert die Zeilen sollten nicht aufgeteilt werden in <tbody> Gruppierungen.

Wir möchten, markieren Kopf-und Fußzeilen für den code zu finden, und wir nicht unbedingt wollen, dass Sie erscheinen dort, wo Sie sind beschrieben

Diese ruft sich selbst auf die Seite laden, sondern könnte stattdessen rechts aufgerufen werden, bevor Sie drucken.

<script>
    $().ready(function () {
        $('table.paged').each(function (i, o) {
            BreakPages($(o));
        })
    });
    function BreakPages(jSource) {
        $('body').width("7in");
        var perInch = $('body').width() / 7.5;
        var nPageHeight = 9 * perInch;

        var jHeader = null;
        var jFooter = null;
        var jWrapper = jSource.clone().empty();
        var jPage = null;
        var iPage = 0;
        jSource.after("<div></div>");
        var jFixed = jSource.next();

        function substed(jStuff) {
            var jCopy = jStuff.clone();
            jCopy.find('span.pageNo').html(" " + iPage + " ").removeClass('pageNo');
            return jCopy;
        }

        jSource.children().each(
            function (iChunk, oChunk) {
                var jChunk = $(oChunk);
                if (jChunk.hasClass('footer')) {
                    jFooter = jChunk;
                }
                if (jChunk.hasClass('header')) {
                    jHeader = jChunk;
                    jFooter = jChunk.nextUntil('.footer').last().next();
                }
                if (!jChunk.hasClass('sample')) {
                    var nHeight = jChunk.height();
                    if (jPage)
                        nHeight += jPage.height();
                    if (jFooter)
                        nHeight += jFooter.height();
                    if (nHeight > nPageHeight) {
                        if (jFooter)
                            jPage.append(substed(jFooter));
                        jPage.after("<p style='page-break-after:always; height:0; width:0'>&nbsp</p>");
                        jPage = null;
                    }
                    if (!jPage) {
                        iPage++;
                        jPage = jWrapper.clone();
                        jFixed.append(jPage);
                        if (jHeader && jHeader !== jChunk)
                            jPage.append(substed(jHeader));
                    }
                    jPage.append(jChunk);
                }
            }
        );
        jFixed.find('span.pageCount').html(" " + iPage + " ");
        jFixed.find('span.pageNo').html(" " + iPage + " ");
        jSource.remove();
    }
</script>

Legen wir die Tabelle mit Seitenzahlen, wie dies.

<body>
    <table>
        <tbody class="header">
            PAGE ONE HEADER
        </tbody>
        <tbody class="header sample">
            LATER PAGE HEADER (IF RELEVANT)
        </tbody>
        <tbody class="together">
            ROW GROUP 1
        </tbody>

        <tbody class="together">
            ROW GROUP N
        </tbody>
        <tbody class="footer">
           FOOTER
        </tbody>
    </table>
</body>

Scannen wir über die <tbody>'s und Zeug, eine Fußzeile und eine Kopfzeile vor jedem element, das dazu bestimmt ist, zu brechen, über das Ende einer Seite.

Wir markieren Kopf-und Fußzeilen mit css-Klassen und verfolgen, die Möglichkeit der änderung von Kopf-und Fußzeilen, indem Sie Sie an den Standorten in der Zeile fließen, wo Sie brauchen, um zu ändern, aber halten Sie unsichtbar mit einer anderen css-Klasse.

Ärgerlicherweise einige Implementierungen von Seite zu brechen, gelten nur für streng "block" - Elemente, also ist es nicht definiert tbody. Also ich habe das auf einem <p> tag-Klasse angehängt, auf jeder Seite der Tabelle.