jQuery imprime la zone spécifiée de la page HTML et pagine automatiquement

jQuery imprime la zone spécifiée de la page HTML et pagine automatiquement_jquery

WBOY

Libérer： 2016-05-16 16:42:28

original

1513 Les gens l'ont consulté

Dans un projet récent, vous devez imprimer des pages HTML. Vous devez spécifier une zone d'impression. Utilisez le plug-in jquery.PrintArea.js

Utilisation :

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

Copier après la connexion

Mais le contenu derrière le DIV sera toujours imprimé. Ici, vous pouvez utiliser CSS pour contrôler l'impression de la pagination

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

Copier après la connexion

Parfois, la page sera imprimée en continu même si CSS est utilisé pour contrôler la pagination. Ici, vous pouvez utiliser les paramètres d'attribut dans le plug-in PrintArea.

Code source partiel de PrintArea :

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

Copier après la connexion

On peut voir que le format d'attribut défini dans le plug-in est JSON. Certains attributs sont présentés ci-dessous

modes définit deux attributs. Lorsque la fenêtre contextuelle est spécifiée, une nouvelle fenêtre sera ouverte, qui peut être considérée comme une page d'aperçu avant impression. La valeur par défaut est iframe.

@popClose | [boolean] | (false),true Indique s'il faut ouvrir et fermer la page d'aperçu une fois l'impression terminée. La valeur par défaut est false (non fermée).

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

Copier après la connexion

De cette façon, vous pouvez spécifier l'impression DIV.

Parlons du but des deux nouveaux attributs que j'ai ajoutés
deuxDiv :
Le deuxième DIV qui doit être imprimé sera bien sûr la deuxième page. Cette page est relativement longue et nécessite une pagination automatique, et chaque ligne du tableau est différente. Certaines lignes s'étendent sur plusieurs lignes. Lorsqu'elles sont imprimées ici, une ligne peut être imprimée. sur deux feuilles de papier.

Titre de la page :
Le deuxième DIV est divisé en plusieurs pages et l'en-tête de chaque page doit être le même. Ce paramètre est l'en-tête commun.

Ces deux paramètres correspondent au DIV dans la page, tel que :

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

Copier après la connexion

Une fois la page définie, voyons comment notre page est traitée dans le plug-in.

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

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

Copier après la connexion

Ce qui suit est le code pour générer du HTML

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

Copier après la connexion

Les méthodes de signification mutuelle sont définies dans le plug-in. Je n'ai apporté aucune modification, je ne les collerai donc pas ici.

Voici mes pensées :

Si nous devons diviser le contenu d'un DIV en plusieurs pages et garantir qu'une ligne ne s'étend pas sur plusieurs pages, nous devons travailler dur pour générer du code HTML.

Recherchez d'abord toutes les lignes du DIV. Lorsque la hauteur de l'en-tête du tableau commun atteint une page après l'ajout de ces lignes, une pagination est nécessaire. Ici, la dernière ligne d'une page s'étend sur plusieurs pages et enregistre cette ligne. Descendez et mettez-le sur la page suivante.

Une fois chaque page générée, vous devez ajouter une balise de pagination CSS après la balise HTML, afin que l'imprimante pagine docilement.

Pour expliquer, la page d'aperçu générée est une page HTML, qui contient des informations d'en-tête et de DTD correspondantes.

Certaines personnes savent peut-être qu'il n'y a que 4 pages dans l'aperçu, mais il y aura toujours une page de plus lors de l'impression. Dans ce cas, vous devez vérifier si la marque de pagination dans la page que vous générez est avant la balise HTML. .
La balise facet doit être après la balise HTML, ce qui peut résoudre le problème de l'impression d'une page supplémentaire.

PS :
Je vais télécharger mon plug-in JS modifié ci-dessous. En raison de mon cycle de projet, de nombreuses parties du code ont été écrites à mort, juste pour résoudre ce problème d'impression. Le code est très compliqué, j'espère que vous y regarderez de plus près

Les collègues espèrent également que quelqu’un pourra l’optimiser et le rendre universel.