JQuery - найти высоту div, затем создать цикл для наложения div

Я использую wkhtmltopdf для преобразования части HTML-страницы в документ PDF, длина которого может быть несколько страниц (в зависимости от текста, который вводит пользовательский код для преобразования).JQuery - найти высоту div, затем создать цикл для наложения div

wkhtmltopdf работает правильно. Теперь я хочу указать пользователю, где разрывы страниц будут происходить до того, как пользователь создаст свой PDF-документ.

Как я наложение HTML DIV тег реплицировать ч тег (< hr />) на верхней в HTML текст, который должен быть преобразован в PDF документ, чтобы указать, где разрывы страницы наиболее вероятны до того, как содержимое формы будет преобразовано в документ PDF?

Я думаю, что должно быть условие цикла JQuery/JavaScript для наложения тега HTML div (с указанием разрыва страницы) каждые 5cms (для этой публикации предположим, что разрыв страницы произойдет на PDF каждые 5cms).

Я пробовал несколько раз, чтобы сделать это сам, но я не могу получить код jq/js правильно (и он убивает меня).

Ниже приведен код fiddle без js/jq.

Вот 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>

Вот CSS:

Если добавить следующую не-печать CSS в HTML сОн тег (отражающий разрыв страницы), то DIV тег не печататься/преобразовываться в документ PDF на wkhtmltopdf, если вам интересно, как тег разрыва страницы будет обрабатываться в документе 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; 
}

источник

2016-12-27 user1261774

Fiddle

Самый простой способ сделать это, является путем укладки прозрачных <div> S, которые имеют высоту требуемого расстояния и видимой нижней границы. Мы можем перекомпоновать div#page_break в исходном HTML на . эти <div> s. Нет необходимости использовать z-index, потому что positioned elements are always layered on top of unpositioned elements. Таким образом, мы можем начать с изменения CSS в этом:

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

Если мы теперь рассмотрим соответствующий бит исходного HTML,

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

мы не увидим никаких правителей еще, потому что мы добавили линейный контейнер, но мы еще не дали ему <div> s.Для каждого ребенка <div>, что мы добавим, мы получим новую линейку, где первая позиционируется 5см от верхней части #main_area и каждого следующего правителя расположена 5см ниже предыдущего:

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

Для того, чтобы присоединять новый <div> к другому элементу в JQuery, мы можем использовать .appendTo:

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

при необходимости, мы можем вставить еще один вызов метода для того, чтобы настроить свойства нового <div>, таких как .height:

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

Теперь нам просто нужно повторить это достаточно часто, чтобы разместить ровно столько правителей. .height случается быть нашим другом снова:

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

Это высота в пикселях. К счастью, в соответствии со стандартом CSS there is a fixed number of pixels in a centimeter (даже в печати), так что мы можем просто сделать некоторые расчеты:

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

pixelsPerCm составляет около 37,8. @ переменная pottedmeat7 onePixel является инверсной для этого, то есть числом сантиметров на пиксель. 5 см составляет около 189 пикселей.

Теперь мы знаем достаточно, чтобы катить петлю, которая добавляет <div> s к #page_break до тех пор, пока высота #text не будет заполнена. Простейший случай, когда все расстояния фиксированы 5см, просто требует от нас, чтобы разделить высоту #text на 5 см:

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

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

Мы напольная divisions, потому что в противном случае вы получите свисающие линейку под текстом когда это textHeight не является точным кратным 5 см. breaks - это оптимизация, поэтому jQuery не нужно искать селектор #page_break на каждой итерации цикла.

источник

2017-01-02 00:41:53 Julian

Поэтому я думаю, что если я правильно понял, вы хотите, чтобы пользовательский визуальный индикатор показывал, где могут произойти разрывы страниц, т.е. размер в CM страницы или для этого тестового примера 5CM.

Если это не так, вы можете просто добавить «разрыв страницы» каждые 5 см?

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>

источник

2016-12-30 00:06:11 pottedmeat7

Dennis Foley, Да, визуальный индикатор, где разрыв страницы может возникать в HTML, но я не могу заставить ваш код работать. – user1261774

oops редактировалось в двух разных местах, пропустила переменную, попробуйте еще раз – pottedmeat7

pottedmeat7, спасибо, но как я могу отобразить цикл на теге '

', а не теге тела? Кажется, похоже, что это не работает на '

'. – user1261774

JQuery - найти высоту div, затем создать цикл для наложения div

ответ

Смежные вопросы