Fix wkhtmltopdf headers clipping content?

Asked 12/7, 2012 at 8:16 Answered 20/4, 2020 at 16:40

My headers often clip content so that the content below it is not completely visible, it appears as though the page continues underneath the header before the header ends and as a result, not all of the content is shown.

Image demonstrating the problem, content is shown below the header

Is there a CSS rule I can use for this? Or a cmd argument for wkhtmltopdf? Or any other way?

Hailey answered 12/7, 2012 at 8:16 Comment(5)

@vdboor's solution whould be chosen as "the" solution! – Seat 1/12, 2017 at 2:26

@XaviMontero I asked Meta about this and they agree with me, the accepted solution will stay on my solution as the doctype was not the problem in my case. meta.stackoverflow.com/questions/360184 – Hailey 4/12, 2017 at 15:29

I will respect your decission, of course. Nevertheless I wonder if you have actually tried the <!doctype html> solution, eliminating any need to play with margins and other things like those; or just directly skipped to test that solution as yours already worked. Testing that solution also means clearing weird CSS things one might previoulsy had. You own the question, you own your choose of the anwer. [continues] – Seat 5/12, 2017 at 13:22

[continuation] To my eyes, the doctype is neat and "pure", while anything playing with css always has the risk to break if one pixel goes here or there in the canvas size. But if you feel the !doctype does not solve your issue, it's okey. I had exactly your problem, and that solution exactly worked for me, and it's simply "pure", no hacks. Your question, you choose the answer; of course. – Seat 5/12, 2017 at 13:23

@XaviMontero yeah all of my content already had that :) – Hailey 8/12, 2017 at 10:1

I have learned that this is actually a known issue and is unlikely to be changed in a while. The workaround is to use style="margin:0; padding:0;" in the header <body> element. Another workaround would be to experiment with the --header-spacing n parameter. Yet another way is to wrap all top-page elements and add margin there, but that is a very bad an non-dynamic idea.

For for further information see:

http://code.google.com/p/wkhtmltopdf/issues/detail?id=182 (duplicate of this issue) http://code.google.com/p/wkhtmltopdf/issues/detail?id=175 (the origins of this issue) http://code.google.com/p/wkhtmltopdf/issues/detail?id=523 (header-spacing workaround)

Hailey answered 17/7, 2012 at 6:46 Comment(4)

Wrap your content in a container <div> after setting body to 0 padding and margin. Then you can apply any desired padding to the container div. Works great. Only other issue I have with headers is that the document margins seem to impact their positioning. For example, if you set the document top margin to 0, the header will not be visible. I haven't found a good work around for this. – Resurrection 11/6, 2015 at 17:49

Setting style="margin:0; padding:0;" on body tag worked like charm for me! :) – Pentatomic 19/7, 2018 at 16:35

Here, just setting margin: 0; padding: 1rem worked without overlapping content, with wkhtmltopdf 0.12.0 and 0.12.4. – Delciedelcina 16/2, 2020 at 22:8

Setting the --header-spacing parameter worked for me. – Section 24/2, 2023 at 22:14

Worked for me with <body style='height:50px;overflow:hidden;margin:0;padding:0;'> in the header and footer and the --header-spacing 30 -T 45mm parameters.

Legalese answered 15/4, 2014 at 13:8 Comment(3)

In my case I've started with header having only one div overlapping the page content as described in the question. But I had additionally OPACITY on the div. When I started to play with the answer for some reason any opacity made the element vanish. I realized this only after several hours of struggle. Apparently there are several bugs :( Be cautious with that. – Varick 14/1, 2016 at 14:59

where to put this -header-spacing 30 -T 45mm ? – Lian 12/7, 2016 at 8:35

I also found this solution: fix height of body and html element. – Bundesrat 12/2, 2019 at 9:22

Make sure you have <!doctype html> at the start of your header/footer page. Webkit renders the page in quirksmode otherwise.

Rubinrubina answered 5/2, 2015 at 11:44 Comment(1)

This solved me the issue I asked here: #47584122 – Seat 1/12, 2017 at 2:26

This worked for me

thead {
    display: table-header-group;
}
tfoot {
    display: table-row-group;
}
tr {
    page-break-inside: avoid;
}

Headship answered 9/4, 2016 at 8:52 Comment(3)

Great! What version of wkhtmltopdf do you use with this? – Hailey 11/4, 2016 at 10:7

i used latest stable version 0.12.3 with wrapper github.com/barryvdh/laravel-snappy – Headship 12/4, 2016 at 9:23

I'm working with tables and it works great in chrome – Ebba 7/5, 2023 at 4:15

this worked for me

--header-spacing XX -T XXmm

XX should be the same value eq: --header-spacing 20 -T 20mm

Elegance answered 14/9, 2017 at 15:17 Comment(0)

I found the solution: I created a bash script who isolates the header in a HTML file then inject it with --header-html

Edit: Assume that your header is in thead tag

filename="x.html"

begin=`awk '/<thead>/{ print NR; exit }' $filename` 
end=`awk '/<\/thead>/{ print NR; exit }' $filename`

echo "<DOCTYPE! html>" > $filename".head.html"
cat $filename | head -$end | tail -n +$begin | sed -e "s/.*<thead>/<thead>/g" | sed -e "s/<\/thead>.*/<\/thead>/g" >> $filename".head.html"

#You can do the same for tfoot

wkhtmltopdf --header-html $filename".head.html" $filename output.pdf

it works also for tfoot or in the case of the header and the footer are in header tag . you also need to make a style tag in the original document to say that display is none . ( you can add this by a script )

Sapodilla answered 20/4, 2020 at 16:40 Comment(3)

Can you share the script? It can help other users. – Lighten 20/4, 2020 at 22:19

Sure , i just modified the post – Sapodilla 22/4, 2020 at 9:16

If the user has control over the HTML being converted and no other header requirements this is a really neat way to handle them! Very clever, even if a bit situation-dependent. – Hailey 23/4, 2020 at 10:14

Recommended topics

Hot tags