jQuery druckt den angegebenen Bereich der HTML-Seite und paginiert

jQuery druckt den angegebenen Bereich der HTML-Seite und paginiert_jquery automatisch

WBOY

Freigeben： 2016-05-16 16:42:28

Original

1583 Leute haben es durchsucht

In einem aktuellen Projekt müssen Sie einen Bereich zum Drucken angeben. Verwenden Sie das Plug-in jquery.PrintArea.js.

Verwendung:

$("div#printmain").printArea();

Nach dem Login kopieren

Der Inhalt hinter dem DIV wird jedoch weiterhin gedruckt. Hier können Sie CSS verwenden, um das Drucken von Seiten zu steuern

<div style="page-break-after: always;"></div>

Nach dem Login kopieren

Manchmal wird die Seite kontinuierlich gedruckt, obwohl CSS zur Steuerung des Seitenwechsels verwendet wird. Hier können Sie die Attributparameter im PrintArea-Plug-in verwenden.

Teilweiser PrintArea-Quellcode:

var modes = { iframe : "iframe", popup : "popup" }; 
var defaults = { mode : modes.iframe, 
popHt : 800, 
popWd : 800, 
popX : 200, 
popY : 200, 
popTitle : '', 
popClose : false , 
twoDiv : '', //自已扩展的属性，为满足变态需求 
pageTitle: ''};//自已扩展的属性，为满足变态需求

Nach dem Login kopieren

Es ist ersichtlich, dass das im Plug-in definierte Attributformat JSON ist. Einige Attribute werden unten vorgestellt

modes definiert zwei Attribute. Wenn Popup angegeben wird, wird ein neues Fenster geöffnet, das als Druckvorschauseite betrachtet werden kann.

@popClose |. [boolean] | (false),true Ob die Vorschauseite nach Abschluss des Druckvorgangs geöffnet und geschlossen werden soll.

$("div#printmain").printArea({mode:"popup",popClose:true});

Nach dem Login kopieren

Auf diese Weise können Sie den DIV-Druck festlegen.

Lassen Sie uns über den Zweck der beiden neuen Attribute sprechen, die ich hinzugefügt habe
twoDiv:
Das zweite DIV, das gedruckt werden muss, ist natürlich die zweite Seite. Diese Seite ist relativ lang und erfordert eine automatische Seitenumblätterung. Einige Zeilen erstrecken sich über mehrere Zeilen auf zwei Blatt Papier.

Seitentitel:
Das zweite DIV ist in mehrere Seiten unterteilt und die Kopfzeile jeder Seite muss gleich sein. Dieser Parameter ist die gemeinsame Kopfzeile.

Diese beiden Parameter entsprechen dem DIV auf der Seite, wie zum Beispiel:

<div id="pageTitle" style="display: none;">

Nach dem Login kopieren

Nachdem die Seite definiert ist, sehen wir uns an, wie unsere Seite im Plug-in verarbeitet wird.

writeDoc.open(); 
writeDoc.write(html); //打找一个窗口关写窗口中的HTML代码 
writeDoc.close(); 

printWindow.focus(); 
printWindow.print();

Nach dem Login kopieren

Das Folgende ist der Code zum Generieren von HTML

html+=docType() + "<html>" + getHead() + getBody(thisPage) + "</html>";

Nach dem Login kopieren

Die gegenseitigen Bedeutungsmethoden sind im Plug-in definiert. Ich habe keine Änderungen vorgenommen, daher werde ich sie hier nicht einfügen.

Hier sind meine Gedanken:

Wenn wir den Inhalt in einem DIV in mehrere Seiten aufteilen und sicherstellen müssen, dass eine Zeile nicht mehrere Seiten umfasst, müssen wir hart an der Generierung von HTML-Code arbeiten.

Suchen Sie zunächst alle Zeilen im DIV. Wenn die Höhe der gemeinsamen Tabellenüberschrift nach dem Hinzufügen dieser Zeilen eine Seite erreicht, ist eine Seitenumschaltung erforderlich. Komm runter und schreibe es auf die nächste Seite.

Nachdem jede Seite generiert wurde, müssen Sie nach dem HTML-Tag ein CSS-Paginierungs-Tag hinzufügen, damit der Drucker gehorsam paginiert.

Zur Erläuterung: Die generierte Vorschauseite ist eine HTML-Seite mit entsprechenden Header- und DTD-Informationen.

Einige Leute wissen vielleicht, dass in der Vorschau nur 4 Seiten vorhanden sind, beim Drucken jedoch immer eine weitere Seite vorhanden ist. In diesem Fall müssen Sie überprüfen, ob sich die Paginierungsmarkierung auf der von Ihnen generierten Seite vor dem HTML-Tag befindet .
Das Facetten-Tag muss nach dem HTML-Tag stehen, wodurch das Problem des Druckens einer weiteren Seite gelöst werden kann.

PS:
Ich werde unten mein modifiziertes JS-Plugin hochladen. Aufgrund meines Projektzyklus wurden viele Teile des Codes zu Tode geschrieben, nur um dieses Druckproblem zu lösen. Der Code ist sehr chaotisch, ich hoffe, Sie schauen genauer hin

Die Kollegen hoffen auch, dass jemand es optimieren und universell machen kann.