CODEWITHSUNDEEP
headerwkhtmltopdf
Michal S
Michal S

Reputation: 1113

WKHTMLTOPDF: How to disable header on the first page

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?

Upvotes: 9

Views: 22182

Answers (5)

JFC
JFC

Reputation: 586

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>

Upvotes: 0

Ahmed Numaan
Ahmed Numaan

Reputation: 1062

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.

Upvotes: 1

Roberto Stein
Roberto Stein

Reputation: 1

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

Upvotes: 0

Raja Bharathi
Raja Bharathi

Reputation: 59

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

Upvotes: 2

Joel Peltonen
Joel Peltonen

Reputation: 13432

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.

Upvotes: 21

Related Questions