JQuery - znajdź wysokość elementu div, a następnie utwórz pętlę, aby umieścić nakładkę

Używam wkhtmltopdf do konwersji części strony HTML do dokumentu PDF, który może mieć kilka stron (w zależności od tekstu, który użytkownik wprowadza do konwersji).JQuery - znajdź wysokość elementu div, a następnie utwórz pętlę, aby umieścić nakładkę

Urządzenie działa poprawnie. Chcę teraz wskazać użytkownikowi miejsce podziału strony, zanim użytkownik utworzy dokument PDF.

Jak nakładka tag HTML div replikować tag hr (< hr />) na najwyższym tekstu HTML, który ma być przekształcony w dokumencie PDF, aby wskazać, gdzie podziały stron są najbardziej prawdopodobne zanim zawartość formularza zostanie przekonwertowana na dokument PDF?

Myślę, że musi istnieć warunek pętli JQuery/JavaScript, aby nakładać znacznik div HTML (wskazujący podział strony) co 5 cm (na potrzeby tego posta przyjmij, że podział strony nastąpi na PDF co 5 cm).

Próbowałem już kilka razy, aby to zrobić sam, ale nie mogę uzyskać kodu jq/js w prawo (i to mnie zabija).

Oto fiddle kodu poniżej bez js/jq.

Oto 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>

Oto CSS:

Jeśli dodać następujące no-drukującą CSS do znacznika HTML div (wskazujący podział strony), znacznik div będzie nie można drukować/konwertować do dokumentu PDF przez wkhtmltopdf, jeśli zastanawiasz się, w jaki sposób znacznik strony zostanie przetworzony w dokumencie 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; 
}

Źródło

2016-12-27 user1261774

Fiddle

Najprostszym sposobem, w tym celu, jest ułożone przezroczyste <div> S, których wysokość żądanej odległości i dolnej granicy widzialnego. Możemy zamienić div#page_break w oryginalnym HTML na zawierający te s. <div>. Nie ma potrzeby używania z-index, ponieważ positioned elements are always layered on top of unpositioned elements. Więc możemy zacząć od zmiany CSS w tym:

#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 
    */ 
}

Jeśli teraz rozważyć odpowiedni kawałek oryginalnej HTML,

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

nie zobaczymy żadnych władców jeszcze, ponieważ dodaliśmy linijka kontenera, ale nie daliśmy jej jeszcze żadnego <div> s.Dla każdego dziecka <div> że dodamy, otrzymamy nowy władca, pierwszy w którym jest umieszczony 5cm od górnej części #main_area i każdej następnej linijce jest umieszczony 5cm poniżej poprzedniego:

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

Aby dołączyć Nowy <div> do innego elementu jQuery można użyć .appendTo:

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

Jeśli to konieczne, można wstawić innej metody połączenia, w celu dostosowania właściwości nowego <div>, jak .height:

$('<div>').height(400).appendTo('#page_break'); // 400 pixels

Teraz wystarczy powtórzyć to wystarczająco często, aby umieścić dokładnie tyle linijek. .height znów jest naszym przyjacielem:

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

To jest wysokość w pikselach. Na szczęście, zgodnie ze standardem CSS there is a fixed number of pixels in a centimeter (nawet w druku), więc można po prostu zrobić kilka obliczeń:

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

pixelsPerCm wynosi około 37,8. Zmienna @ dontedmeat7's onePixel jest odwrotnością tego, tj. liczbą centymetrów na piksel. 5cm ma około 189 pikseli.

Teraz wiemy wystarczająco dużo, aby przetoczyć pętlę, która dodaje <div> s do #page_break, aż zostanie wypełniona wysokość #text. W najprostszym przypadku, gdzie wszystkie odległości są przymocowane do 5cm, po prostu wymaga od nas, aby podzielić wysokość #text przez 5cm:

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

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

My podłoga divisions, bo inaczej dostaniesz zwisające poniżej linijki tekstu ilekroć textHeight nie jest dokładną wielokrotnością 5 cm. breaks to optymalizacja, więc jQuery nie musi wyszukiwać selektora #page_break w każdej iteracji pętli.

Źródło

2017-01-02 00:41:53 Julian

Uważam, że jeśli dobrze rozumiem, potrzebny jest dla użytkownika wskaźnik wizualny, w którym mogą wystąpić podziały stron, np. rozmiar w CM strony lub w tym przypadku testowym 5 CM.

Jeśli tak, to czy nie można po prostu dodać elementu "podział strony" co 5 CM?

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>

Źródło

2016-12-30 00:06:11 pottedmeat7

Dennis Foley, Tak, wizualny wskaźnik, w którym mogą występować podziały strony w kodzie HTML, ale nie mogę uruchomić kodu. – user1261774

oops edytował w dwóch różnych miejscach, pominął zmienną, spróbuj ponownie – pottedmeat7

pottedmeat7, dziękuję, ale w jaki sposób mogę wyświetlić pętlę w tagu '

', a nie w tagu body? Nie wydaje się, aby to działało na "'

". – user1261774

JQuery - znajdź wysokość elementu div, a następnie utwórz pętlę, aby umieścić nakładkę

Odpowiedz

Powiązane problemy