Menu
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
570
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:
.marks)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.
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
