Вставьте складки на каждую страницу (wkhtmltopdf)

Я использую wkhtmltopdf 0.12.2.1 для создания счетов-фактур и т.д.

Мне нужно отображать складки на каждой странице в формате pdf. Как я могу повторить их с помощью javascript на каждой странице, если содержимое больше одного?

Что моя основная разметка

<!DOCTYPE html>
<html>
  <head>
    <title>PDF Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body id="pdf-page">
    <div class="marks">
      <div class="mark mark-top mark-left"></div>
      <div class="mark mark-top mark-right"></div>
      <div class="mark mark-middle mark-left"></div>
      <div class="mark mark-bottom mark-left"></div>
      <div class="mark mark-bottom mark-right"></div>
    </div>
    <div id="print-area">
      <div id="letter-head"></div>
      <div id="subject-line">Subject</div>
      <div id="document-content">
        ....
        ....
        ....
      </div>
    </div>
  </body>
</html>

В основном это выглядит как Изображение

Ответы

Ответ 1

Хорошо, мне потребовались дни, чтобы понять это... из-за отсутствия примеров в Интернете (для PHP/HTML/Javascript). Мы выполнили следующие шаги:

  • получить DPI вашего документа
  • установить элемент в реальный размер страницы (из поля зрения)
  • создать элемент wrapper/page (ваш случай .marks)
  • определить, требуется ли содержание страницы для размещения нескольких страниц

Примечание: я делаю это без тестирования и т.д., и вам, конечно, нужно поиграть.

...

<div class="marks">
    <div class="mark mark-top mark-left"></div>
    <div class="mark mark-top mark-right"></div>
    <div class="mark mark-middle mark-left"></div>
    <div class="mark mark-bottom mark-left"></div>
    <div class="mark mark-bottom mark-right"></div>
</div>

...

<script>
    // some static stuff found it somewhere on the internet
    var PDF = {
        width: 8.27, // inches, 210mm
        height: 11.65, // inches, 296mm
        margins: {
            top: 1.97, left: 0.34,
            right: 0.393700787, bottom: 0.393700787
        }
    };

    $(document).ready(function() {
        // get page sizes by creating 'shadow' element
        var pageSize = $('<div></div>')
            .css({
                height: PDF.height +'in', width: PDF.width +'in',
                top: '-100%', left: '-100%',
                position: 'absolute',
            })
            .appendTo('body');

        // set debug element
        $('.debug').html(pageSize.height());

        // set every page elements .marks to proper height
        // dont forget the substract the header and footer height
        $('.marks').height(pageSize.height() - footerHeight - headerHeight);

        // @TODO: duplicate .marks to times a pages is created, and !!maybe!! set the top of .marks with pageSize.height()
    });
</script>

Я нашел свое вдохновение для кода здесь.

Это сработало для меня, потому что у меня были фиксированные элементы высоты и нужно было повторить его на странице (в моем .wrapper elm, как и ваш .marks, и они были "относительными" элементами). Таким образом, я мог бы определить, когда "открыть" новую страницу, закрыв .marks в вашем случае.