Converting HTML to PDF or Image in C# Using wkhtmltopdf Part 2 - Header & Footer

Vinoth Xavier
Nov 13, 2024

417
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Ref Part 1: Converting HTML to PDF or Image in C# Using wkhtmltopdf

#region headers

switches += "--header-html {URL} ";
switches += "--no-header-line ";
switches += "--header-spacing 5 ";

#endregion headers

#region footer

switches += "--no-footer-line ";
switches += "--footer-html {URL} ";
switches += "--footer-spacing 0 ";
switches += "--footer-font-size 7 ";
switches += "--footer-right  \" [page] of [topage] \" ";

#endregion footer

To set custom header and footer content in a PDF using wkhtmltopdf, you can utilize the --header-* and --footer-* options in the command-line switches. Here’s a guide on how to use these effectively.

Header and Footer Switches: Ref Link

Header Content

--header-center [text]: Centers the specified text in the header.
--header-left [text]: Places text on the left side of the header.
--header-right [text]: Places text on the right side of the header.
--header-html [URL]: Allows you to use a custom HTML file for the header. This file can include formatted text, images, and more.

Footer Content

--footer-center [text]: Centers the specified text in the footer.
--footer-left [text]: Places text on the left side of the footer.
--footer-right [text]: Places text on the right side of the footer.
--footer-html [URL]: Similar to --header-html, this option uses an HTML file to define custom footer content.
Dynamic Elements in Header and Footer: You can use the following placeholders within header and footer text options:
- [page]: Current page number.
- [toPage]: Total page count.
- [date]: Current date.
- [time]: Current time.
- [title]: Document title.
- [subTitle]: Document subtitle.
- [pageNumber]: Same as [page].
- [totalPages]: Same as [toPage].
Additional Header and Footer Styling Options
- --header-spacing [value]: Controls the spacing between the header and the content.
- --footer-spacing [value]: Controls the spacing between the footer and the content.
- --header-font-size [size]: Sets the font size for the header text.
- --footer-font-size [size]: Sets the font size for the footer text.

Example Command

Here’s an example command that adds a header with centered text, a footer with left-aligned text, and a custom HTML for both,

wkhtmltopdf \
  --header-center "Report" \
  --header-font-size 10 \
  --footer-left "Confidential" \
  --footer-font-size 8 \
  --footer-right "[page]/[toPage]" \
  --header-html "path/to/header.html" \
  --footer-html "path/to/footer.html" \
  input.html output.pdf

This command will place custom text in the header and footer, using both inline text and HTML for complex layouts.

Realtime Examples

--header-html {URL} 
--footer-html {URL}

We need to create an API endpoint that retrieves HTML content as a URL.

[HttpGet("GetHeaderHtml")]
public IActionResult GetHeaderHtml(int id)
{ 
    return File(
        new MemoryStream(Encoding.UTF8.GetBytes(
            "<!DOCTYPE html>" +
            "<html lang=\"en\">" +
            "<head><title>Testing</title></head>" +
            "<body>" +
            "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width:100%\">" +
            "<tr>" +
            "<td style=\"max-width:40%\">" +
            "<img alt=\"text\" src=\"https://www.c-sharpcorner.com/App_Themes/CSharp/Images/SiteLogo.png\" style=\"max-width:100%\">" +
            "</td>" +
            "<td style=\"max-width:60%\">" +
            "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width:100%\">" +
            "<tr>" +
            "<td align=\"center\" style=\"font-size:30px;color:#e14a3a;font-family:Century Gothic,Helvetica,Sans-Serif;font-weight:700;padding:15px 0 5px\">" +
            "Company Name Or Any Header Content" +
            "</td>" +
            "</tr>" +
            "<tr>" +
            "<td align=\"center\" style=\"font-size:16px;color:#0a0f84;font-family:Helvetica,Sans-Serif;padding-bottom:10px\">" +
            "(Sub - Content)" +
            "</td>" +
            "</tr>" +
            "</table>" +
            "</td>" +
            "</tr>" +
            "<tr>" +
            "<td colspan=\"2\" style=\"width:100%;border-width:1px;border-style:solid;border-color:#000\"></td>" +
            "</tr>" +
            "</table>" +
            "</body>" +
            "</html>"
        )), 
        "text/html"
    );
}

[HttpGet("GetFooterHtml")]
public IActionResult GetFooterHtml(int id)
{
    return File(
        new MemoryStream(Encoding.UTF8.GetBytes(
            "<!DOCTYPE html>" +
            "<html lang=\"en\">" +
            "<head><title>Testing</title></head>" +
            "<body>" +
            "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width:100%\">" +
            "<tr>" +
            "<td style=\"width:100%;border-width:1px;border-style:solid;border-color:#0a0f84\"></td>" +
            "</tr>" +
            "<tr>" +
            "<td align=\"center\" style=\"font-size:16px;color:#e14a3a;font-family:Helvetica,Sans-Serif;padding:12px 0;font-weight:400\">" +
            "Address Line 1, Address Line 2, City Name-Postal Code, State, Country." +
            "</td>" +
            "</tr>" +
            "<tr>" +
            "<td align=\"center\" style=\"font-size:16px;color:#0a0f84;font-family:Helvetica,Sans-Serif;padding-bottom:15px;font-weight:400\">" +
            "&#9742; Ph: Contact Number& & & & & & & Telefax: Number." +
            "</td>" +
            "</tr>" +
            "</table>" +
            "</body>" +
            "</html>"
        )), 
        "text/html"
    );
}

Important Note If we use a custom page for the header/footer, you need to add <!DOCTYPE HTML> at the beginning of your header/footer HTML.

Sample output is as follows,

Address Line