How to generate page footer for a PDF with dynamic content generated using Rotativa

I am generating a pdf, and my employer asked me to add a footer to every single page in the pdf. The pdf gets generated with Rotativa, with a html page that turns into a pdf.

My only problem is, how am i gonna do this. I thought about some ideas, plain css code, although there are more then enough options, none of them really worked out for me. Especially because i can have 1 page, or i can have 10, depends on the amount of information that has to be put onto it.

So the footer has to be responsive to the amount of pages that will be generated.

Does anyone have any ideas for me? I want to get this worked out really bad, but i just have no clue how to.

Greetings Lorenzo Otto

Solution

If I have not misunderstood your question, you could simply use an HTML page as a footer, to display the page footer, involving some javascript to display the current page and total number of pages. I'am actually using this approach for several web applications using Rotativa that generate PDF files based on MVC views with dynamic content.

Supposing we create a Footer.html (use the name you prefer here), this could be the HTML file for the PDF footer, including javascript code to generate page number info:

<!DOCTYPE html>

<html>
<head>
    <script>
        function subst() {
            var vars = {};
            var x = window.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="subst()">
    <div style="font-family: Helvetica; font-size:0.75rem; text-align: right; width:100%;">
        <span class="page"></span> / <span class="topage"></span>
    </div>
</body>

</html>

*For sure, you can change the footer div style as you wish, in order to suit your desing needs.

And on the other side, guessing the footer HTML page (called Footer.html before) is located in a folder called Shared, inside Views folder, you could this to prepare the required custom switches before calling Rotativa:

string customSwitches = "--footer-html " + Server.MapPath("~/Views/Shared/Footer.html");

So, if you are using an MVC action to generate a PDF based on a View called MyPdfView.cshtml, you can make uso of ViewAsPdf, passing it your custom switches, this way:

return new ViewAsPdf("MyPdfView")
{
    FileName = "MyPdfView.pdf",
    CustomSwitches = customSwitches
};

And that's all. Please let me know if this worked for you.