Вставлять разрывы страниц динамически на основе переполнения содержимого

У меня есть большая веб-страница, созданная через многие компоненты Vue. Представленная структура HTML несколько похожа на это:

Я хочу напечатать это красиво на странице А5, имеющий header и footer повторяется на каждой печатной странице. Я пробовал это с помощью двух подходов:

Преобразование HTML-структуры в контейнеры страниц и разделение элементов на основе всего clientHeight. Что-то вроде

Или, добавив свойства страницы страницы CSS в header и динамически вставляя их в области переполнения контента. Например

Обход DOM для поиска точки переполнения выглядит так:

Тем не менее, оба подхода дают неточные результаты при печати.

CSS @page не поддерживается Safari, поэтому не может быть полезным.

display: table-header-group и table-footer-group тоже не работают.

Существует ли другое кросс-браузерное решение для получения красиво напечатанных страниц с повторяющимися верхними и нижними колонтитулами, а не отсечения/перекрытия какого-либо контента или если код обхода DOM может быть улучшен, чтобы быть более общим и стабильным? Могут ли быть исправлены или упрощены?

Заранее спасибо. Я не нашел удовлетворительного решения или решения этой проблемы.

Ответы

Ответ 1

Не уверен, что это соответствует отдельному ответу или должно быть просто комментарием с некоторыми (надеюсь, полезными) советами.

Итак... это битва, которую разработчики уже давно сражались. Вы можете найти различные ответы по этому вопросу, которые на самом деле кажутся дубликатом (несколько).

Отказ от ответственности: я не могу проверить методы, упомянутые в iOS, Safari и IE сам. Они больше напоминают мой предыдущий опыт и знания, собранные из сообщений SO и различных статей комментариев.

Я попытаюсь предоставить некоторые указатели и методы, чтобы немного приблизиться к полной поддержке браузера, но нет обещаний, пока @print будет полностью поддерживаться:/

Фиксированное позиционирование. По какой-то причине браузеры повторяют фиксированные элементы на печатных страницах. Жесткая часть - это настройка полей вашей страницы, чтобы верхний и нижний колонтитулы не перекрывались с содержанием страницы, но тогда вы должны быть золотыми. Это не так просто, поскольку даже при поддержке @page маржа страницы также отталкивает фиксированный контент. И без поддержки, вам нужно будет решить какой-то display: table возможно, столбец. Я реплицировал fixed решение в простом примере (я вложил CSS, чтобы вы могли открыть его в отдельном HTML файле локально для более легкого тестирования):

https://jsfiddle.net/vjvu8uox/

@media print - это то, что вы могли бы изучить рядом с @print, поскольку он поддерживается с CSS2. Он не предоставляет те же самые мощные селектор, но позволяет немного настроить ваши стили для целей печати.

"Типы печатных и экранных медиафайлов определены в HTML4. Полный список типов мультимедиа в HTML4:" aural "," braille "," handheld "," print "," project "," screen "," tty ", tv. CSS2 определяет тот же список, обесценивает "звуковое сопровождение и добавляет" рельефный и "речь". Кроме того, "все используется, чтобы указать, что таблица стилей применяется ко всем типам носителей".
Таблицы. Многие браузеры позиционировать thead и tfoot в верхней и нижней части каждой страницы на печать элементов. Это работает, если ваш thead и tfoot не содержат несколько tr элементов. Поддержка этого приземлилась в Chrome в марте этого года (2018 год). Полезными ключевыми словами для этого являются:
```
thead { display: table-header-group; }

tfoot { display: table-footer-group; }
```

Мне интересно, можете ли вы объединить 1. и 3. сначала поместить верхний и нижний колонтитулы с fixed так, чтобы они повторялись, а затем, возможно, создавали пустые элементы, чтобы действовать как группа table-header-group и table-footer-group, что может обеспечить прокладки для фиксированных элементов?

Я также быстро рассмотрю ваш сценарий прохождения, указав, что вам может понадобиться учетная запись для вашего контейнера приложений Vue (если вы не подключили свой экземпляр Vue к элементу body, который считается довольно плохим) и все его вложенные дети, В этом смысле фрагмент jQuery @MunimMunna служит вам лучше. Я бы переписал его как vanilla JS и использовал полусовременные утилиты, мы могли бы легко исправить поддержку Safari для этого скрипта (у меня нет времени прямо сейчас, но я могу посмотреть на него в понедельник, когда я нахожусь на своей работе rig/Mac, чтобы проверить его на Safari).

Желаем удачи в ваших усилиях по поддержке печати!

Ответ 2

Я сделал аналогичную задачу здесь, но это было просто для форматирования страниц для просмотра в многостраничном дизайне. Используя аналогичный подход, мы можем реализовать его для печати с добавлением верхнего и нижнего колонтитула. Дайте мне знать, если это сработает для вас, и если вам нужна помощь.

$(function(){
  function printFormat($contentElement){
    //Preparing Temporary Page
  	var $printWrapper=$('.printWrapper').empty();
    var $tempA5=$('<div class="page-a5">').appendTo($printWrapper);
    $contentElement.clone().children().appendTo($tempA5);
    var $header = $tempA5.find('.header'), $footer = $tempA5.find('.footer');
    var pageHeight = $tempA5.height(), headerHeight = $header.height(), footerHeight = $footer.height();
    $header.remove();$footer.remove();
    //Generating Pages
    var $pageA5=$('<div class="page-a5">').appendTo($printWrapper).append($header.clone());
    var $pagefooter=$footer.clone().appendTo($pageA5),$bottomLine=$('<div>').appendTo($pageA5);
    var $elements=$tempA5.children();
    var i=-1, totalChildren=$elements.length;
    while(++i<totalChildren){
    	var $element=$elements.eq(i);
      var $element_copy=$element.clone().insertBefore($pagefooter);
      if($bottomLine[0].offsetTop>pageHeight) {
        $pageA5=$('<div class="page-a5">').appendTo($printWrapper).append($header.clone());
        $pagefooter=$footer.clone().appendTo($pageA5);
        $bottomLine=$('<div>').appendTo($pageA5);
        $element_copy.insertBefore($pagefooter);
      }
    }
    $tempA5.remove();
    $printWrapper.find('.footer').each(function(i,el){
    	$(el).css("marginTop",pageHeight-el.nextSibling.offsetTop);
    });
    $contentElement.hide();
  }
  printFormat($("#contents"));
});

.page-a5{
    position: relative;
    width: 720px;
    height: 1068px;
    margin: auto;
}
.header{
    font-size: 20px;
    padding: 20px;
    background: orange;
}
.footer{
    font-size: 20px;
    padding: 20px;
    background: blue;
}

@media print {
  body,
  page {
    margin: 0;
    box-shadow: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="printWrapper"></div>
<div id="contents">
    <div class="header">Header :)</div>
<p><span style="color: inherit; font-family: inherit; font-size: 14px;"></span></p><h2 class="entry-title fusion-post-title" data-fontsize="18" data-lineheight="27" style="color: rgb(51, 51, 51); margin-top: 0px; margin-bottom: 28px; font-size: 18px; font-family: museo-slab-300, Arial, Helvetica, sans-serif; line-height: 27px; padding-bottom: 0px;">Blog Image Post</h2><h2><p style="text-align: center; color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;"><img src="https://www.jqueryscript.net/images/Universal-Placeholder-Text-Lorem-Ipsum-Generator-getlorem.jpg" style="width: 425px;"><span style="color: rgb(107, 113, 122);"><br></span></p><p style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;"><span style="color: rgb(107, 113, 122);">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up&nbsp;</span><span style="color: rgb(107, 113, 122);">one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</span></p><h3 style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;"><ul style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: Verdana, sans-serif; font-size: 15px;"><li style="box-sizing: inherit;">Item</li><li style="box-sizing: inherit;">Item</li><li style="box-sizing: inherit;">Item</li><li style="box-sizing: inherit;">Item</li></ul></h3><h3 style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of&nbsp; "de Finibus Bonorum&nbsp;<span style="color: rgb(107, 113, 122);">et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.</span><br></h3><ol style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: Verdana, sans-serif; font-size: 15px;"><li style="box-sizing: inherit;">First item</li><li style="box-sizing: inherit;">Second item</li><li style="box-sizing: inherit;">Third item</li><li style="box-sizing: inherit;">Fourth item</li></ol><p style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;"><span style="color: rgb(107, 113, 122);">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section</span><span style="color: rgb(107, 113, 122);">&nbsp; 1.10.32.&nbsp;</span><span style="color: rgb(107, 113, 122);">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English&nbsp;</span><span style="color: rgb(107, 113, 122);">versions from the 1914 translation by H. Rackham.</span></p><table id="example" class="ui celled table dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="box-sizing: inherit; border-collapse: separate; background: rgb(255, 255, 255); margin: 0px; border: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none; border-radius: 0.285714rem; color: rgba(0, 0, 0, 0.87); font-size: 14px; font-family: Lato, &quot;Helvetica Neue&quot;, Arial, Helvetica, sans-serif;"><thead style="box-sizing: inherit; box-shadow: none;"><tr role="row" style="box-sizing: inherit;"><th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="box-sizing: content-box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; background: rgb(249, 250, 251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34, 36, 38, 0.1); border-left: none; position: relative; border-radius: 0.285714rem 0px 0px; width: 137px;">Name</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="box-sizing: content-box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; background: rgb(249, 250, 251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1); position: relative; width: 224px;">Position</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="box-sizing: content-box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; background: rgb(249, 250, 251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1); position: relative; width: 104px;">Office</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="box-sizing: content-box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; background: rgb(249, 250, 251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1); position: relative; width: 39px;">Age</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="box-sizing: content-box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; background: rgb(249, 250, 251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1); position: relative; width: 85px;">Start date</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="box-sizing: content-box; margin: 0px; padding: 0.928571em 20px 0.928571em 0.785714em; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; background: rgb(249, 250, 251); vertical-align: inherit; border-bottom-width: 1px; border-bottom-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1); position: relative; border-radius: 0px 0.285714rem 0px 0px; width: 83px;">Salary</th></tr></thead><tfoot style="box-sizing: inherit; box-shadow: none;"><tr style="box-sizing: inherit;"><th rowspan="1" colspan="1" style="box-sizing: content-box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; border-top-color: rgba(34, 36, 38, 0.15); background: rgb(249, 250, 251); vertical-align: middle; border-left: none; border-radius: 0px 0px 0px 0.285714rem;">Name</th><th rowspan="1" colspan="1" style="box-sizing: content-box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; border-top-color: rgba(34, 36, 38, 0.15); background: rgb(249, 250, 251); vertical-align: middle; border-left: 1px solid rgba(34, 36, 38, 0.1);">Position</th><th rowspan="1" colspan="1" style="box-sizing: content-box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; border-top-color: rgba(34, 36, 38, 0.15); background: rgb(249, 250, 251); vertical-align: middle; border-left: 1px solid rgba(34, 36, 38, 0.1);">Office</th><th rowspan="1" colspan="1" style="box-sizing: content-box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; border-top-color: rgba(34, 36, 38, 0.15); background: rgb(249, 250, 251); vertical-align: middle; border-left: 1px solid rgba(34, 36, 38, 0.1);">Age</th><th rowspan="1" colspan="1" style="box-sizing: content-box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; border-top-color: rgba(34, 36, 38, 0.15); background: rgb(249, 250, 251); vertical-align: middle; border-left: 1px solid rgba(34, 36, 38, 0.1);">Start date</th><th rowspan="1" colspan="1" style="box-sizing: content-box; margin: 0px; padding: 0.785714em; font-weight: 400; text-align: inherit; transition: background 0.1s ease, color 0.1s ease; cursor: auto; border-top-color: rgba(34, 36, 38, 0.15); background: rgb(249, 250, 251); vertical-align: middle; border-left: 1px solid rgba(34, 36, 38, 0.1); border-radius: 0px 0px 0.285714rem;">Salary</th></tr></tfoot><tbody style="box-sizing: inherit;"><tr role="row" class="odd" style="box-sizing: inherit;"><td class="sorting_1" style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top: none; border-left: none;">Airi Satou</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top: none; border-left: 1px solid rgba(34, 36, 38, 0.1);">Accountant</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top: none; border-left: 1px solid rgba(34, 36, 38, 0.1);">Tokyo</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top: none; border-left: 1px solid rgba(34, 36, 38, 0.1);">33</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top: none; border-left: 1px solid rgba(34, 36, 38, 0.1);">2008/11/28</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top: none; border-left: 1px solid rgba(34, 36, 38, 0.1);">$162,700</td></tr><tr role="row" class="even" style="box-sizing: inherit;"><td class="sorting_1" style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top-color: rgba(34, 36, 38, 0.1); border-left: none;">Angelica Ramos</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1);">Chief Executive Officer (CEO)</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1);">London</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1);">47</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1);">2009/10/09</td><td style="box-sizing: content-box; margin: 0px; padding: 0.785714em; transition: background 0.1s ease, color 0.1s ease; text-align: inherit; border-top-color: rgba(34, 36, 38, 0.1); border-left: 1px solid rgba(34, 36, 38, 0.1);">$1,200,000</td></tr></tbody></table><p style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;"><br></p><p style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: 20px;"><br></p></h2><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p><div><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><div><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urna. Morbi dui lectus, pharetra nec elementum eget, vulputate ut nisi. Aliquam accumsan, nulla sed feugiat vehicula, lacus justo semper libero, quis porttitor turpis odio sit amet ligula. Duis dapibus fermentum orci, nec malesuada libero vehicula ut.</span></p><p><span style="color: rgb(116, 116, 116); font-family: &quot;PT Sans&quot;, Arial, Helvetica, sans-serif;">Integer sodales, urna eget interdum eleifend, nulla nibh laoreet nisl, quis dignissim mauris dolor eget mi. Donec at mauris enim. Duis nisi tellus, adipiscing a convallis quis, tristique vitae risus. Nullam molestie gravida lobortis. Proin ut nibh quis felis auctor ornare. Cras ultricies, nibh at mollis faucibus, justo eros porttitor mi, quis auctor lectus arcu sit amet nunc.</span></p></div><p><br></p>
    <div class="footer">Footer :P</div>
</div>