We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add HTML as header and footer in PDF while converting HTML to PDF

Platform: WinForms |
Control: PDF |
Published Date: November 29, 2017 |
Last Revised Date: January 30, 2020

Adding a header or footer from HTML file while converting HTML to PDF is possible by using the WebKit HTML converter.

Syncfusion WebKit HTML converter do not have direct support for adding header or footer from HTML file. As a workaround, we can convert each HTML data to PDF (Header, body (actual HTML), footer) separately and then draw it in the new PDF document as it looks like header and footer added. Refer to the following steps and screenshot.

  1. Convert the header and footer HTML documents to PDF with required page height (header/footer height). 
  2. Get the template of header and footer PDF documents.
  3. Then, set the template to PdfHeader and PdfFooter properties of WebKit converter settings for main conversion.
    Note:

    This requires three level of HTML to PDF conversion.

 

Steps to add HTML as Header and Footer in PDF while converting HTML to PDF using C# and VB.NET:

  1. Create a new C# console application project.

Create a console application.

  1. Install the Syncfusion.HtmlToPdfConverter.QtWebKit.WinForms NuGet package as reference to your .NET Framework application from NuGet.org.

Install NuGet packages.

  1. Copy the QtBinaries from the HtmltoPdfConverter NuGet package installed location to project folder, which contains the .csproj file.

Copy the QtBinaries folder from installed location.

Paste the QtBinaries folder to project location.

  1. Include the following namespaces in Program.cs file.

C#

using Syncfusion.HtmlConverter;
using Syncfusion.Pdf;
using Syncfusion.Drawing;
using System.IO;

VB.NET

Imports Syncfusion.HtmlConverter
Imports Syncfusion.Pdf
Imports Syncfusion.Drawing
Imports System.IO

 

  1. Include the following code snippet in Program.cs file

C#

//Initialize HTML to PDF converter
HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.WebKit);
WebKitConverterSettings webKitSettings = new WebKitConverterSettings();
//convert header HTML and set its template to webkit settings
webKitSettings.PdfHeader = HeaderHTMLtoPDF();
//convert footer HTML and set its template to webkit settings
webKitSettings.PdfFooter = FooterHTMLtoPDF();
//Set webkitpath
webKitSettings.WebKitPath = @"../../QtBinaries";
webKitSettings.WebKitViewPort = new Size(1024, 0);
htmlConverter.ConverterSettings = webKitSettings;
//Convert URL to PDF
PdfDocument document = htmlConverter.Convert("https://www.google.com/");
//Save the document
document.Save("Sample.pdf");

 

//Convert header HTML to PDF and get pdf page template element of the result
private static PdfPageTemplateElement HeaderHTMLtoPDF()
{
     HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.WebKit);
     WebKitConverterSettings webKitSettings = new WebKitConverterSettings();
     webKitSettings.PdfPageSize = new SizeF(PdfPageSize.A4.Width, 50);
     webKitSettings.Orientation = PdfPageOrientation.Landscape;
     //Set webkitpath
     webKitSettings.WebKitPath = @"../../QtBinaries";
     webKitSettings.WebKitViewPort = new Size(1024, 0);
     htmlConverter.ConverterSettings = webKitSettings;
     string url = System.IO.Path.GetFullPath("../../Data/header.html");
     //Convert URL to PDF
     PdfDocument document = htmlConverter.Convert(url);
     RectangleF bounds = new RectangleF(0, 0, document.Pages[0].GetClientSize().Width, 50);
     PdfPageTemplateElement header = new PdfPageTemplateElement(bounds);
     header.Graphics.DrawPdfTemplate(document.Pages[0].CreateTemplate(), bounds.Location, bounds.Size);
     return header;
}

 

//Convert footer HTML to PDF and get pdf page template element of the result
private static PdfPageTemplateElement FooterHTMLtoPDF()
{
      HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.WebKit);
      WebKitConverterSettings webKitSettings = new WebKitConverterSettings();
      webKitSettings.PdfPageSize = new SizeF(PdfPageSize.A4.Width, 25);
      webKitSettings.Orientation = PdfPageOrientation.Landscape;
      //Set webkitpath
      webKitSettings.WebKitPath = @"../../QtBinaries";
      webKitSettings.WebKitViewPort = new Size(1024, 0);
      htmlConverter.ConverterSettings = webKitSettings;
      string url = System.IO.Path.GetFullPath("../../Data/footer.html");
      //Convert URL to PDF
      PdfDocument document = htmlConverter.Convert(url);
      RectangleF bounds = new RectangleF(0, 0, document.Pages[0].GetClientSize().Width, 25);
      PdfPageTemplateElement footer = new PdfPageTemplateElement(bounds);
      footer.Graphics.DrawPdfTemplate(document.Pages[0].CreateTemplate(), bounds.Location, bounds.Size);
      return footer;
 }

 

VB.NET

'Initialize HTML to PDF converter
Dim htmlConverter As HtmlToPdfConverter = New HtmlToPdfConverter(HtmlRenderingEngine.WebKit)
Dim webKitSettings As WebKitConverterSettings = New WebKitConverterSettings()
'Convert header HTML and set its template to WebKit settings
webKitSettings.PdfHeader = HeaderHTMLtoPDF()
'Convert footer HTML and set its template to WebKit settings
webKitSettings.PdfFooter = FooterHTMLtoPDF()
webKitSettings.WebKitViewPort = New Size(1024, 0)
'Set WebKit Path
webKitSettings.WebKitPath = System.IO.Path.GetFullPath("../../QtBinaries")
htmlConverter.ConverterSettings = webKitSettings
'Convert URL to PDF
Dim document As PdfDocument = htmlConverter.Convert("https://www.google.com/")
document.Save("Sample.pdf")

 

'Convert header HTML to PDF and get pdf page template element of the result
Private Function HeaderHTMLtoPDF() As PdfPageTemplateElement
Dim htmlConverter As HtmlToPdfConverter = New HtmlToPdfConverter(HtmlRenderingEngine.WebKit)
Dim webKitSettings As WebKitConverterSettings = New WebKitConverterSettings()
webKitSettings.PdfPageSize = New Size(PdfPageSize.A4.Width, 50)
webKitSettings.WebKitViewPort = New Size(1024, 0)
'Set Orientation
webKitSettings.Orientation = PdfPageOrientation.Landscape
'Set WebKit Path
webKitSettings.WebKitPath = System.IO.Path.GetFullPath("../../QtBinaries")
htmlConverter.ConverterSettings = webKitSettings
'Convert URL to PDF
Dim url As String = System.IO.Path.GetFullPath("../../Data/footer.html")
Dim document As PdfDocument = htmlConverter.Convert(url)
Dim bounds As RectangleF = New RectangleF(0, 0, document.Pages(0).GetClientSize().Width, 50)
Dim header As PdfPageTemplateElement = New PdfPageTemplateElement(bounds)
header.Graphics.DrawPdfTemplate(document.Pages(0).CreateTemplate(), bounds.Location, bounds.Size)
Return header
End Function

 

'Convert footer HTML to PDF and get pdf page template element of the result
Private Function FooterHTMLtoPDF() As PdfPageTemplateElement
Dim htmlConverter As HtmlToPdfConverter = New HtmlToPdfConverter(HtmlRenderingEngine.WebKit)
Dim webKitSettings As WebKitConverterSettings = New WebKitConverterSettings()
webKitSettings.PdfPageSize = New Size(PdfPageSize.A4.Width, 25)
webKitSettings.WebKitViewPort = New Size(1024, 0)
'Set Orientation
webKitSettings.Orientation = PdfPageOrientation.Landscape
'Set WebKit Path
webKitSettings.WebKitPath = System.IO.Path.GetFullPath("../../QtBinaries")
htmlConverter.ConverterSettings = webKitSettings
'Convert URL to PDF
Dim url As String = System.IO.Path.GetFullPath("../../Data/footer.html")
Dim document As PdfDocument = htmlConverter.Convert(url)
Dim bounds As RectangleF = New RectangleF(0, 0, document.Pages(0).GetClientSize().Width, 25)
Dim footer As PdfPageTemplateElement = New PdfPageTemplateElement(bounds)
footer.Graphics.DrawPdfTemplate(document.Pages(0).CreateTemplate(), bounds.Location, bounds.Size)
Return footer
End Function

 

You can download the working C# sample from HTMLHeaderFooter.zip.

You can download the working VB.NET sample from HTMLHeaderFooterVB.zip.

By executing the program, you will get the PDF document as follows.

Output screenshot

Take a moment to peruse the documentation, where you will find other WebKit, Blink, and IE rendering engines supported by Syncfusion .NET PDF library for converting HTML pages to PDF document along with respective customization options and features.

Click here to explore the rich set of Syncfusion Essential PDF features.

An online sample link to convert HTML to PDF.

Note:

Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, include a license key in your projects. Refer to link to learn about generating and registering Syncfusion license key in your application to use the components without trail message.

 

2X faster development

The ultimate WinForms UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon