Utilisation de CSS et / ou de jQuery pour les pages imprimées avec sauts de page

J’ai une page HTML générée dynamicment qui est conçue pour être imprimée.

Je voudrais créer des sauts de page basés sur des sections de div – là où un div donné – s’il ne s’adapte pas complètement à la page, insère un saut de page avant.

En théorie, une seule div, jusqu’à peut-être 10, peut tenir sur une seule page imprimée. Je pense donc devoir utiliser jQuery pour les insertions une fois la page chargée.

S’il s’agissait d’une application de bureau, je l’approcherais de la manière suivante:

  1. Mesurer la largeur et la hauteur de la page (en utilisant un object imprimante).
  2. Mesurez chaque hauteur div et soustrayez-la de la hauteur totale restante de la page.
  3. if (espace_current – div_height> 0) {// le mettre à la page} else {// insérer le saut de page en premier}

Existe-t-il un moyen d’utiliser jQuery, CSS, JavaScript brut ou autre chose qui me conduirait à ce scénario?

Ok, j’ai passé la journée passée à déterminer cela, alors je voulais poster ma solution à cela au cas où quelqu’un d’autre aurait besoin de la réponse.

De manière générale, voici ce que j’ai fait.

  1. Sortie générée comme d’habitude (non prévue par l’imprimante)
  2. Création de 2 feuilles de style (une pour l’imprimante et une pour l’écran). Les mesures étaient en pouces (pas en pixels) pour que tous les éléments de la page soient transformés en sortie imprimée.
  3. En utilisant jQuery, j’ai fait ce qui suit:

-> fonction appelée qui ajoute la page initiale à DOM – quelque chose comme ceci

// assumes old_page_id is existing element in DOM, and var page_id = 1; $j("
") .insertAfter('#' + old_page_id);

-> mesure la hauteur de div qui est la page (dans mon cas, $ (‘. page’). height ();)

-> a lancé une fonction pour faire les insertions de divs et de nouvelles pages – quelque chose comme ça

 $('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 } ); 

Notez que chaque page div (dans mon cas, class = ‘page’) dans la feuille de style de l’imprimante a ceci:

saut de page après: toujours;

C’est ainsi que je l’ai créé pour créer une nouvelle page sur l’imprimante où je voulais.

Après avoir exécuté la fonction jQuery ci-dessus, j’ai caché la section d’origine contenant les éléments div que je voulais déplacer dans les pages imprimées. Notez que je ne pouvais pas cacher cette section à l’avance car mes mesures jQuery ne produiraient pas de résultats valides (dans mon cas, j’ai placé tous les div dans un wrapper de div avec l’id de ‘ hide_me ‘, et ai défini le style sur height: 1px; auto; ).

Je me rends compte que la vue est très longue, mais espérons que cela vous sera utile.

Vous pouvez toujours insérer une balise DIV vide avec l’atsortingbut CSS {pageBreakBefore: ‘always’} ou {pageBreakAfter: ‘always’} à des points de votre code HTML où vous avez calculé en jQuery les limites de la page en vérifiant la hauteur du DIVs ou autre chose. Toutefois, vous devez posséder une connaissance assez intime du contenu de la page et probablement spécifier la taille de votre police, etc., sous la forme “pt” au lieu de “px”.

Voir une requête similaire ici cependant:

Appliquer les sauts de page d’impression avec CSS

Ce n’est pas exactement ce que vous cherchez, mais jetez un coup d’œil à ce http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

Avec un tiret supplémentaire de JS, ce que vous voulez essayer peut être possible.

Vous pouvez essayer d’utiliser ce plugin pour imprimer les éléments d’une page. http://www.recoding.it/wp-content/uploads/demos/jqprint-demo.htm

Cela peut être utile si vous suivez la même logique que celle suggérée pour une application de bureau. Vous pouvez envelopper vos “pages” dans des divs et c’est ce que vous diriez à jqPrint d’imprimer. Les sauts de page peuvent être un autre élément ou aussi un div, mais avec une classe pour vous faire savoir que c’est un saut de page. Par exemple:

 
...

etc..

puis

 $('#page1').jqprint(); 

Je ne sais pas si vous connaissez jQuery. Si vous ne le faites pas, faites le nous savoir.

Le but de la pagination imprimée, dans mon esprit, est de ne pas scinder les choses en deux. Et généralement, ce que vous voulez ne pas scinder le plus souvent, ce sont les données tabulaires. C’est donc une approche qui suppose que vous avez transformé les

en un format de tableau et que vous avez regroupé les ensembles de lignes qui ne doivent pas être divisés en

.

Nous voulons marquer les en-têtes et les pieds de page pour que le code soit trouvé, et nous ne voulons pas nécessairement qu’ils apparaissent exactement là où ils sont décrits.

Cela s’appelle au chargement de la page, mais peut être appelé juste avant l’impression.

  

Nous disposons la table pour être paginé comme ceci.

   PAGE ONE HEADER  LATER PAGE HEADER (IF RELEVANT)  ROW GROUP 1  ROW GROUP N  FOOTER 

Nous

les

un pied de page et un en-tête avant tout élément destiné à traverser la fin d’une page.

Nous marquons les en-têtes et les pieds de page avec des classes CSS et nous gardons une trace de la possibilité de les modifier en les plaçant aux emplacements du stream de lignes où ils doivent être modifiés, tout en les maintenant invisibles avec une autre classe CSS.

Malheureusement, certaines implémentations de saut de page ne s’appliquent qu’à des éléments ssortingctement “bloquants”, de sorte qu’elles ne sont pas définies sur tbody. C’est pourquoi je l’ai appliqué à une classe de balises

ajoutée à chaque table de page.