Skip to content

Reporting How to add Header and Footer in WKHTMLTOPDF report

Victor Tomaili edited this page May 3, 2021 · 1 revision

If you need to add header and/or footer to yours reports, you can simply set wkhtmltopdf options in report class.

    [Report("YourReportKey")]
    [ReportDesign(MVC.Views.Example.YourReportView)]
    public class YourReport : IReport, ICustomizeHtmlToPdf
    {
        public Int32? ID { get; set; }

        public object GetData()
        {
            // Get your data
            [...]
        }

        public void Customize(IHtmlToPdfOptions options)
        {
            // Get path of App_Data\Reporting, that is the folder where I have header.html and footer.html files
            string PhisicalPath = Path.Combine(System.Web.Hosting.HostingEnvironment.ApplicationPhysicalPath,
                @"App_Data\Reporting\");

            options.CustomArgs.Add("--header-html");
            options.CustomArgs.Add(PhisicalPath + "header.html");

            options.CustomArgs.Add("--footer-html");
            options.CustomArgs.Add(PhisicalPath + "footer.html");

            options.CustomArgs.Add("--disable-smart-shrinking");
        }
    }

Footer and header are simply HTML files, where you can put your information.

My Heater.html file

    <!DOCTYPE HTML>
    <html>
    <head>
        <script>
            function subst() {
                var d = new Date();
                var n = (d.getDate() < 10 ? "0" + d.getDate() : d.getDate()) + "/";
                n += (d.getMonth() + 1 < 10 ? "0" + (d.getMonth()+1) : (d.getMonth()+1)) + "/";
                n += d.getFullYear() + " ";
                n += (d.getHours() < 10 ? "0"+ d.getHours() : d.getHours()) + ":";
                n += (d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes());
                document.getElementById("date").innerHTML = n;
            }
        </script>
    </head>
    <body style="border:0; margin: 0;" onload="subst()">
        <table style="width: 100%; font-size: 10px">
            <tr>
                <td class="section"></td>
                <td style="text-align:right">
                    <span id="date"></span>
                </td>
            </tr>
        </table>
    </body>
    </html>

My Footer.html file

    <!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 style="border:0; margin: 0;" onload="subst()">
        <table style="width: 100%; font-size: 12px">
            <tr>
                <td style="text-align:right">
                    Page <span class="page"></span> of <span class="topage"></span>
                </td>
            </tr>
        </table>
    </body>
    </html>

Enjoy :)

Clone this wiki locally