Post
Ask Question

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

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

  1. --footer-center [text]: Centers the specified text in the footer.
  2. --footer-left [text]: Places text on the left side of the footer.
  3. --footer-right [text]: Places text on the right side of the footer.
  4. --footer-html [URL]: Similar to --header-html, this option uses an HTML file to define custom footer content.
  5. 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].
  6. 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

Address


Similar Articles