Maison > Article > interface Web > jQuery imprime la zone spécifiée de la page HTML et pagine automatiquement_jquery

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

WBOYoriginal: 2016-05-16 16:42:281507parcourir

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();

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>

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: ''};//自已扩展的属性，为满足变态需求

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});

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;">

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();

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

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

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comparaison des performances de traitement des caractères entre Node.js et PHP et Python_node.jsArticle suivant：Comparaison des performances de traitement des caractères entre Node.js et PHP et Python_node.js

Articles Liés

Voir plus