-
Notifications
You must be signed in to change notification settings - Fork 806
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 :)
Copyright © Serenity Platform 2017-present. All rights reserved.
Documentation | Serene Template | Live Demo | Premium Support | Issues | Discussions