Verwenden von CSS und / oder jQuery für gedruckte Seiten mit Seitenumbrüchen

Ok, ich habe den letzten Tag damit verbracht, dies herauszufinden, also wollte ich meine Lösung hier posten, falls jemand anders die Antwort benötigt.

Im Allgemeinen habe ich das hier gemacht.

1. Generierte Ausgabe als normal (nicht für den Drucker vorgesehen)
2. Erstellt 2 Stylesheets (eins für Drucker und eins für Bildschirm). Die Messungen erfolgten in Zoll (nicht Pixel) für alle Seitenelemente, die in eine gedruckte Ausgabe umgewandelt werden sollten.
3. Mit jQuery habe ich Folgendes gemacht:

- & gt; aufgerufene Funktion, die die erste Seite an DOM anfügt - so etwas wie

- & gt; messen Höhe von div das ist die Seite (in meinem Fall $ ('. page'). height ();)

- & gt; hat eine Funktion ausgeführt, um die Einfügungen von divs und neuen Seiten zu machen - so etwas wie

Beachten Sie, dass jede Seite div (in meinem Fall class = 'page') im Drucker-Stylesheet folgendes enthält:

Seitenumbruch: immer;

So habe ich es geschafft, eine neue Seite auf dem Drucker zu erstellen, wo ich wollte.

Nachdem ich die jQuery-Funktion oben ausgeführt hatte, versteckte ich den ursprünglichen Abschnitt, der div-Elemente enthielt, die ich in gedruckte Seiten verschieben wollte. Hinweis: Ich konnte diesen Abschnitt nicht vor der Hand verbergen, da meine jQuery-Messungen keine gültigen Ergebnisse liefern würden (in meinem Fall habe ich alle divs innerhalb eines div-Wrappers mit der ID ' hide_me platziert und den Stil festgelegt zu height: 1px; Überlauf: auto; ).

Ich merke, das ist sehr 50.000 ft Sicht, aber hoffentlich ist es hilfreich für Sie.

Sie können immer ein leeres DIV-Tag mit dem CSS-Attribut {pageBreakBefore: 'always'} oder {pageBreakAfter: 'always'} an Punkten in Ihrem HTML einfügen, wo Sie in jQuery die Seitengrenzen berechnet haben Höhe der DIVs oder was auch immer. Aber Sie müssen den Inhalt der Seite ziemlich genau kennen und wahrscheinlich Ihre Schriftgrößen usw. als "pt" anstatt "px" angeben.

Siehe hier eine ähnliche Abfrage:

  

Druckseitenumbrüche mit CSS erzwingen

Nicht genau das, wonach Sie suchen, aber sehen Sie sich das an Ссылка

Mit einem zusätzlichen Schuss JS, möglicherweise möglich, was Sie versuchen möchten zu erreichen.

Sie könnten versuchen, mit diesem Plugin die Elemente einer Seite zu drucken. Ссылка

Dies könnte hilfreich sein, wenn Sie der gleichen Logik folgen, die Sie für eine Desktop-Anwendung vorgeschlagen haben. Sie können Ihre "Seiten" in divs einschließen und das würden Sie jqPrint zum Drucken mitteilen. Die Seitenumbrüche könnten ein anderes Element oder auch ein div sein, aber mit einer Klasse, die Sie über den Seitenumbruch informiert. Zum Beispiel:

usw.

dann

Ich weiß nicht, ob Sie mit jQuery vertraut sind. Wenn Sie uns nicht wissen lassen.

Der Punkt der Druckseitenumwandlung besteht meines Erachtens darin, die Dinge nicht schlecht zu trennen. Und normalerweise möchten Sie Tabellendaten am häufigsten nicht teilen. Dies ist ein Ansatz, bei dem davon ausgegangen wird, dass Sie <div> in Tabellenformatierung geändert und die Gruppen von Zeilen gruppiert haben, die nicht in <tbody> groupings aufgeteilt werden sollen.

Wir möchten Kopf- und Fußzeilen markieren, damit der Code gefunden wird, und wir möchten nicht, dass sie genau dort erscheinen, wo sie beschrieben werden

Dies ruft sich beim Laden der Seite auf, könnte aber auch direkt vor dem Drucken aufgerufen werden.

Wir legen den Tisch so aus, dass er paginiert wird.

Wir scannen über die <tbody> und stopfen eine Fußzeile und eine Kopfzeile vor jedes Element, das dazu bestimmt ist, über das Ende einer Seite zu springen.

Wir markieren Kopf- und Fußzeilen mit css-Klassen und verfolgen die Möglichkeit, Kopf- und Fußzeilen zu ändern, indem Sie sie an den Stellen im Zeilenfluss platzieren, an denen sie geändert werden müssen, sie aber mit einer anderen css-Klasse unsichtbar halten.

Ärgerlich, einige Implementierungen von Seitenumbruch gelten nur für streng "Block" -Elemente, so dass es nicht auf tbody definiert ist. Deshalb habe ich es auf eine <p> -Tag-Klasse angewendet, die an jede Seitentabelle angehängt ist.