WKHTMLTOPDF: How to disable header on the first page

Asked 14/8, 2012 at 8:4 Answered 16/8, 2018 at 15:36

wkhtml doesn´t repeat table elements "th" on every page like it should. So I thought it could be possible to simply use the --header-html option and add the table headers manually this way. But I don´t want them on the first page, since there are table headers already, plus some other first page stuff... I found some JS solution, but its too much complicated for me, since I know just the very basics of JS... Any ideas?

Connolly answered 14/8, 2012 at 8:4 Comment(3)

It's a bit unclear what you mean. Doesn't repeat table elements on every page? Do you mean table elements in the page headers? Do you mean it should add <th> elements to each table in your source document? Table headers and page headers are two different beasts, when the manual talks about headers it means the content of what gets put into every page of the generated PDF document :) – Tachograph 14/8, 2012 at 9:40

I mean that: The table headers doesn´t repeat on every page. For that reason I want to display page headers instead (which will contain "table headers"), generated by wkhtml. They are displayed correctly, but I don´t want them on the first page. – Connolly 14/8, 2012 at 9:45

i need to do this for python if you have an answer for that too, thanks! – Nichellenichol 25/7, 2021 at 15:47

Did you try the JS solution? It's actually not that complicated. I just did a test with a long html file that contained a table that is split into many different pages and I managed to remove the headers from page 1 and 3 using this header file:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script>
        function subst() {
          var vars={};
          var x=document.location.search.substring(1).split('&');
          for (var i in x) {var z=x[i].split('=',2);vars[z[0]] = unescape(z[1]);}
          var x=['frompage','topage','page','webpage','section','subsection','subsubsection'];
          for (var i in x) {
            var y = document.getElementsByClassName(x[i]);
            for (var j=0; j<y.length; ++j) y[j].textContent = vars[x[i]];

            if(vars['page'] == 1){ // If page is 1, set FakeHeaders display to none
               document.getElementById("FakeHeaders").style.display = 'none';
            }

            if(vars['page'] == 3) { // If page is 3, set FakeHeaders display to none
                document.getElementById("FakeHeaders").style.display = 'none';
            }
          }
        }
        </script>
    </head>
    <body style="border:0;margin:0;" onload="subst()">
        <table style="border-bottom: 1px solid pink; width: 100%; margin-bottom:5px;" id="FakeHeaders">
          <tr>
            <th>Your awesome table column header 1</th>
            <th>Column 2</th>
            <th style="text-align:right">
                Page <span class="page"></span>/<span class="topage"></span>
            </th>
          </tr>
        </table>
    </body>
</html>

They key points to not there is that the table "headers" are contained in a table that has the ID "FakeHeaders". The javascript function subst() is run when the body is loaded and during the function it checks if the current page is 1 or if the current page is 3 and if it is, the FakeHeaders is set invisible. You will need to play with the margins and CSS to get it to look like you want but this Should work.

This is a known problem with wkhtmltopdf and most likely it won't be fixed any time soon, see issue 566 in the issue tracker. I see the JavaScript option as the only usable workaround, but you can try playing around with divs or manually splitting the tables if your input html, style and page sizes/margins are very predictable - but be warned, it will be really annoying.

Tachograph answered 14/8, 2012 at 10:33 Comment(8)

I can´t split it manually because there are various line heights... But: I tried this JS solution. I got it exactly like you, in head element. I added function call and id, but it does nothing:/ ... – Connolly 14/8, 2012 at 11:23

Oh I read it wrong... I skipped the part where you say "header file"... Now it works just fine... Thanks!!! :) – Connolly 14/8, 2012 at 12:8

Great that you got it working, paging can cause some annoying issues! :) – Tachograph 14/8, 2012 at 13:24

Im experiencing annoying issues all the time with wkhtml :D But that´s just cause Im not very skilled :) – Connolly 14/8, 2012 at 14:21

@Nenotlep I got this to work in the footer-html first try, but not using header-html, which display nothing. I'm using the PHP-WKHTMLtoPDF wrapper, but I don't think it is related to the wrapper as the command goes out. Have you had this happen? – Mantel 8/1, 2015 at 19:16

Yeah this doesn't remove the margins added to the first page, though, so it still makes for a complete mess. – Triennium 23/9, 2016 at 19:43

@Triennium haven't used wkhtmltopdf in a while, but I think that's just not possible. Maybe you could create the coverpage separately and pdftk it together or something, I did that sometimes. Butif print layout is very important and precise for you I'd recommend XSLT/Apache fop or maybe trying PrinceXML, if you have the finance for it. – Tachograph 27/9, 2016 at 14:9

@Nenotlep We used to use FO, but we're using the contents as both an HTML page and a PDF, and we don't want to build it twice. That's probably the most flexible solution though. We just decided to drop the page headers altogether. – Triennium 27/9, 2016 at 16:36

If you can split the first page alone as a separate html, you can do this by using 'cover' in WKHTMLTOPDF.

PDFKit.new(url, :header_html => header_url, :cover => cover_url).

Degrade answered 17/3, 2015 at 13:28 Comment(1)

The problem right now is that cover do remove header/footer but keep the reserved space in the page. So in result, lets say you need a different header or a full page background color, you cant with 0.12.5 – Respectability 16/8, 2018 at 15:26

I faced similar problem in which I had used WKHTMLTOPDF header/footer and I wanted to remove them from the cover page. The issue was that the maximum height of header/footer was still appearing on all pages including the cover page.

The solution that clicked my mind and saved the day was that I generated two WKHTMLTOPDF files, one with header/footer on all pages and the other one without any header/footer. I then picked cover page from WKHTMLTOPDF generated file without header/footer and rest of the pages from the other WKHTMLTOPDF generated file with header/footer on all pages. I used PDF Merger library in PHP to merge selected pages of two WKHTMLTOPDF generated 'PDF' files to generate single PDF file with cover page and header/footer on rest of the pages.

Tumefy answered 23/7, 2018 at 17:32 Comment(0)

<script type="text/javascript"> 
    var pdfInfo = {};
    var x = document.location.search.substring(1).split('&');

    for (var i in x) { var z = x[i].split('=',2); pdfInfo[z[0]] = unescape(z[1]); }

    function getPdfInfo() {
        var page = pdfInfo.page || 1;

        if(page != 1) {
            document.getElementById('pHeader').style.display = 'none';
        }
    }
    getPdfInfo();
</script>

Pothunter answered 11/10, 2016 at 15:55 Comment(1)

Add some comments to your answer – Saransk 11/10, 2016 at 16:17

For some reason, Nenotlep's answer didn't worked for me. It removed only page number..

So I created a class with a display: none; and simply added it. It worked this way.

function pagination() {
  var vars = {};
  var x = document.location.search.substring(1).split('&');
  for (var i in x) {
    var z = x[i].split('=', 2);
    vars[z[0]] = unescape(z[1]);
  }
  var x = ['frompage', 'topage', 'page', 'webpage', 'section', 'subsection', 'subsubsection'];
  for (var i in x) {
    var y = document.getElementsByClassName(x[i]);
    for (var j = 0; j < y.length; ++j) y[j].textContent = vars[x[i]];

    if (vars['page'] == 1) {
      var element = document.getElementById("pager");
      element.classList.add("pager-hidden");
    }
  }

}

.pager {
  font-size: 0.09375in;
  padding-right: 1.00003in;
  text-align: right;
  letter-spacing: 0.01042in;
  padding-bottom: 0.37501in;
}

.pager.pager-hidden {
  display: none;
}

<body onload="pagination()">

  <div class="pager" id="pager">
    <div class="pager-pages">Page <span class="page"></span> / <span class="topage"></span></div>
  </div>

</body>

Respectability answered 16/8, 2018 at 15:36 Comment(0)

Recommended topics

Hot tags