JQuery - trouver la hauteur de div puis créer une boucle pour superposer div

J'utilise wkhtmltopdf pour convertir une partie d'une page HTML en un document PDF pouvant contenir plusieurs pages (selon le texte que l'utilisateur doit convertir). Le wkhtmltopdf fonctionne correctement. Je veux maintenant indiquer à l'utilisateur où les sauts de page se produiront avant que l'utilisateur crée leur document de pdf.JQuery - trouver la hauteur de div puis créer une boucle pour superposer div

Comment puis-je overlay une balise div HTML pour répliquer une étiquette h (< hr />) sur du texte HTML qui doit être converti en document PDF pour indiquer où les sauts de page sont les plus susceptibles de se produire avant que le contenu du formulaire est converti en document PDF?

Je pense qu'il doit y avoir une condition de boucle JQuery/JavaScript pour superposer la balise div HTML (indiquant le saut de page) chaque 5cms (dans le cadre de ce post, supposons que le saut de page se produira sur le PDF chaque 5cms).

J'ai essayé plusieurs fois de le faire moi-même, mais je ne peux pas obtenir le bon code jq/js (et ça me tue).

Voici une fiddle du code ci-dessous sans les js/jq.

Voici le code HTML:

<body> 
    <div id="main_area"> 
     <div id="text"> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     <p> 
      Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
     </p> 
     </div> 
     <div id='page_break'></div>   
    </div> 
</body>

Voici le CSS:

Si j'ajouter ce qui suit sans impression CSS à la balise div HTML (indiquant le saut de page), la balise div sera ne pas être imprimé/converti au document PDF par wkhtmltopdf, au cas où vous vous demandez comment le tag de saut de page sera traité dans le document PDF.

@media print { 
    /* prevents the element from being printed in the pdf */ 
    .no_print, .no_print * { 
     display: none !important 
    } 
} 
#main_area { 
    padding: 2px; 
    width:100%; 
    background:#fff; 
    color:#333; 
} 
#text { 
    z-index:1; 
} 
#page_break { 
    position: absolute; 
    width: 100%; 
    height: 5px; 
    background: red; 
    top: 5cm; 
    z-index:0; 
    opacity: 0.2; 
}

Source

2016-12-27 user1261774

Fiddle

Le plus simple pour ce faire, est par empilement <div> transparentes s qui ont une hauteur de la distance désirée et une bordure inférieure visible. Nous pouvons réutiliser le div#page_break dans le code HTML d'origine à contenir ces <div> s. Il n'est pas nécessaire d'utiliser z-index, car positioned elements are always layered on top of unpositioned elements. Nous pouvons donc commencer par changer le CSS dans ce:

#main_area { 
    padding: 2px; 
    width: 100%; 
    background: #fff; 
    color: #333; 
} 
#page_break { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    opacity: 0.2; 
} 
#page_break > div { 
    width: 100%; 
    height: 5cm; 
    border-bottom: 5px solid red; 
    margin-bottom: -5px; 
    /* negative margin above ensures that the distance 
     between two rulers is exactly the height of the div 
    */ 
}

Si l'on considère maintenant le bit correspondant du HTML original,

<div id="main_area"> 
    <div id="text"> 
     ... 
    </div> 
    <div id='page_break'></div> 
</div>

nous ne verrons pas les règles encore, parce que nous avons ajouté la Règle conteneur mais nous ne l'avons pas donné <div> s à contenir pour le moment.Pour chaque enfant <div> que nous ajoutons, nous obtiendrons une nouvelle règle, où la première est positionnée 5cm du haut de la #main_area et chaque règle suivante est positionné 5cm en dessous de la précédente:

<div id="main_area"> 
    <div id="text"> 
     ... 
    </div> 
    <div id='page_break'> 
     <div></div> <!-- first ruler, 5cm from top --> 
     <div></div> <!-- second ruler, 10cm from top --> 
     <div></div> <!-- third ruler, 15cm from top --> 
    </div> 
</div>

Pour ajouter une nouvelle <div> à un autre élément jQuery, nous pouvons utiliser .appendTo:

$('<div>').appendTo('#page_break');

Si nécessaire, nous pouvons insérer un autre appel de méthode afin d'ajuster les propriétés de la nouvelle <div>, comme .height: Maintenant, il suffit de répéter cela assez souvent pour placer exactement assez de règles. .height se trouve être notre ami à nouveau:

var textHeight = $('#text').height();

Ceci est une hauteur en pixels. Heureusement, selon la norme CSS there is a fixed number of pixels in a centimeter (même en version imprimée), de sorte que nous pouvons simplement faire quelques calculs:

var pixelsPerInch = 96; 
var cmPerInch = 2.54; 
var pixelsPerCm = pixelsPerInch/cmPerInch;

pixelsPerCm est environ 37,8. La variable @ pottedmeat7 onePixel est l'inverse de ceci, c'est-à-dire le nombre de centimètres par pixel. 5cm arrive à environ 189px.

Nous en savons maintenant assez pour lancer une boucle qui ajoute <div> s au #page_break jusqu'à ce que la hauteur du #text soit remplie. Le cas le plus simple, où les distances sont fixées à 5 cm, il suffit de nous oblige à diviser la hauteur du #text par 5cm:

var divisions = Math.floor((textHeight/pixelsPerCm)/5); 

var breaks = $('#page_break'); 
for (var i = 0; i < divisions; ++i) { 
    $('<div>').appendTo(breaks); 
}

Nous l'étage divisions, car sinon vous aurez une règle ballants ci-dessous le texte chaque fois le textHeight n'est pas un multiple exact de 5cm. breaks est une optimisation pour que jQuery n'ait pas à rechercher le sélecteur #page_break à chaque itération de la boucle.

Source

2017-01-02 00:41:53 Julian

Je pense que si je comprends bien, vous voulez un indicateur visuel à l'utilisateur où les sauts de page peuvent se produire, par exemple. la taille en CM d'une page ou pour ce cas de test 5CM.

Si c'est le cas, ne pourriez-vous pas ajouter un div "saut de page" tous les 5CM?

var onePixel = 0.02645833; 
 
var onePage = 5;//in CM 
 
var height = Math.floor(jQuery(document).height() * onePixel); 
 
var mainBody = jQuery("body"); 
 
for(var i=onePage; i<height; i+=onePage) { 
 
    mainBody.append("<div id='page_break' style='top:"+i+"cm;'></div>"); 
 
}

@media print { 
 
     /* prevents the element from being printed in the pdf */ 
 
     .no_print, .no_print * { 
 
      display: none !important 
 
     } 
 
    } 
 
    #main_area { 
 
     padding: 2px; 
 
     width:100%; 
 
     background:#fff; 
 
     color:#333; 
 
    } 
 
    #text { 
 
     z-index:1; 
 
    } 
 
    #page_break { 
 
     position: absolute; 
 
     width: 100%; 
 
     height: 5px; 
 
     background: red; 
 
     top: 5cm; 
 
     z-index:0; 
 
     opacity: 0.2; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
     <div id="main_area"> 
 
      <div id="text"> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      <p> 
 
       Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet. 
 
      </p> 
 
      </div>  
 
     </div> 
 
    </body>

Source

2016-12-30 00:06:11 pottedmeat7

Dennis Foley, Oui, un indicateur visuel où les sauts de page peuvent se produire dans le code HTML, mais je ne peux pas faire fonctionner votre code. – user1261774

oops modifiait à deux endroits différents, manquait une variable, réessayais – pottedmeat7

pottedmeat7, merci, mais comment puis-je avoir la boucle affichée sur la balise '

' et non la balise body? Je n'arrive pas à faire fonctionner ça sur le '

' moi-même. – user1261774

JQuery - trouver la hauteur de div puis créer une boucle pour superposer div

Répondre

Questions connexes