CODEWITHSUNDEEP
ruby-on-railswicked-pdf
user2699369
user2699369

Reputation: 21

Dynamic section name in wicked_pdf header

In Wicked_pdf I have several sections. Each section is starts a new page and is started by a header like so:

<h2 class="section" style="color: #0050b2;font: arial, sans-serif;font-size: 17;">Application details</h2>

In my header I would like to display the section name on the first and all subsequent pages that belong to this section. I know that this would be Javascript / jQuery, but my skills in this area are woefully inadequate.

Any help would be greatly appreciated.

Upvotes: 1

Views: 731

Answers (1)

dvdchr
dvdchr

Reputation: 734

Take a look at this code snippet below, taken from WickedPDF Readme:

<html>
  <head>
    <script>
      function number_pages() {
        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]];
        }
      }
    </script>
  </head>
  <body onload="number_pages()">
    Page <span class="page"></span> of <span class="topage"></span>
  </body>
</html>

Especially this line:

var x=['frompage','topage','page','webpage','section','subsection','subsubsection'];

These are special parameters made available on each PDF pages, accessible via document.location.search. For your case, luckily subsection contains the text content of element in your PDF pages.

Now, to achieve the dynamic header, in your controller you need to specify the :header, and point it to an erb file which contains:

<html>
  <head>
    <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]);}

        document.getElementById('dynamic-header').innerHTML = vars['section'];
      }
    </script>
  </head>
  <body onload="subst()">
    <h2 id="dynamic-header">Replace me!</h2>
  </body>
</html>

The header will be replaced by the element found inside your PDF page. This also solves your dynamic requirement, because vars['section'] will contain the same content until it finds another with different content. Please note that I haven't tested the code above, but I hope you get the idea.

Upvotes: 2

Related Questions