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

回答1:

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:

get the DPI of your document
set element to the real page size (out of sight)
create wrapper/page element (your case .marks)
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 here.

This worked out for me because I had fixed height elements and needed to repeat it on the page (in my .wrapper elm same as your .marks and they were 'relative' elements). In this way I could determine when to 'open' an new page by closing .marks in your case.

回答2:

I know this thread is old, but I just had the same problem and also spent numerous hours on it. The basic problem is that wkhtml simply does not know the number of pages which will result, before it has rendered. That's why only the header/footer get that information.

Calculating something with DPI does not make any sense because $(document).height() will always return the same value regardless of DPI setting. Also, this height is not given back correctly anyway; I tried it with "textblock, textblock, textblock" = 4500 px, "textblock, image, textblock, image, textblock, image" = 4560 px, despite the images having > 500px height each. So, this road leads nowhere.

My working solution:

Generate the HTML and generate the PDF (without a TOC).
Use the commandline tool "pdfinfo" to get the actual number of pages.
Generate the HTML again, but this time, pass along the number of pages.
In your HTML, do something like this (adapt this to your template language):

$factor = 100 / $totalPages; // = 25 with 4 pages

for ($pageNum = 1; $pageNum <= $totalPages; $pageNum++) { $html .= '<div style="position: absolute; top: ' . ($factor*$pageNum)-($factor/2) . '%"></div> }

You will get 4 DIVs with a "top" attributes of 25-12.5, 50-12.5, 75 - 12.5, 100-12.5 percent.
Render the PDF
Be happy, finally

I am using wkhtml 0.12.3 with patched qt.

来源：https://stackoverflow.com/questions/35269749/insert-folding-marks-on-every-page-wkhtmltopdf

标签

javascript

wkhtmltopdf