csy_dot_io February 2016

Insert folding marks on every page (wkhtmltopdf)

I'm using wkhtmltopdf 0.12.2.1 to create invoices and so on.

I need to display folding marks on every page in a pdf. How can I repeat them with javascript on every page, if the content is larger than one?

That's my basic markup

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

It looks basically like that Image

Answers


PXgamer February 2016

I've included a simple vertical line, and a horizontal. demo

As wkhtmltopdf uses HTML, it should be fine. The vertical line can be extended pretty easily too using padding-bottom/top.

.hfold {
  display: block;
  margin-top: 1px;
  margin-bottom: 1px;
  margin-left: auto;
  margin-right: auto;
  border: 1px dashed #cccccc;
}
.vfold {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 2px;
  margin-right: 4px;
  padding-bottom: 100px;
  border-left: 1px dashed #cccccc;
}
<span>Top</span>
<i class="hfold"></i>
<span>Bottom</span>
<br/>
<br/>
<span>Left</span>
<i class="vfold"></i>
<span>Right</span>

This code can be added into a HTML file called sidebar.html

This is all easily customisible. To add this automatically using wkhtmltopdf, you can add it to wkhtmltopdf by using the --header-html parameter and referencing the sidebar.html file


Yoram de Langen February 2016

Okay, this took me days to figuring this out.... because of the lack of examples on the internet (for PHP/HTML/Javascript). We got the following steps:

  1. get the DPI of your document
  2. set element to the real page size (out of sight)
  3. create wrapper/page element (your case .marks)
  4. determine if content of the page needs multiple pages to fit on

Note: I'm doing this without testing etc. and you need to play around of course.

...

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

I found my inspiration for the code

Post Status

Asked in February 2016
Viewed 1,902 times
Voted 4
Answered 2 times

Search




Leave an answer