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

The HTML-to-PDF convertor is a .NET PDF library for converting webpages, SVG MHTML and HTML files to PDF using C#. It uses the popular rendering engine Blink (Google Chrome). It is reliable and accurate. The result preserves all graphics, images, text, fonts, and the layout of the original HTML document or webpage.

Using this library, you can add a header or footer in PDF document.
Steps to add HTML as header and footer in PDF while converting HTML to PDF document:

1. Create a new C# console application project.
2. Install the Syncfusion.HtmlToPdfConverter.WinForms NuGet package as reference to your .NET Framework application from NuGet.org.
   
3. 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

4. Include the following code snippet in Program.cs file.
   C#

//Initialize HTML to PDF converter.
           HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter();
           BlinkConverterSettings blinkConverterSettings = new BlinkConverterSettings();
           //Set the bounds for header
           RectangleF headerBounds = new RectangleF(0, 0, blinkConverterSettings.PdfPageSize.Width, 35);
           //Create PDF page template element for header with bounds.
           PdfPageTemplateElement header = new PdfPageTemplateElement(headerBounds);
           //Create the line points
           PointF point1 = new PointF(0, 0);
           PointF point2 = new PointF(blinkConverterSettings.PdfPageSize.Width, 0);
           //Draw the line on PDF document
           header.Graphics.DrawLine(new PdfPen(PdfBrushes.DarkBlue, 1f), point1, point2);
           PointF point3 = new PointF(0, 3);
           PointF point4 = new PointF(blinkConverterSettings.PdfPageSize.Width, 3);
           //Draw the line on PDF document
           header.Graphics.DrawLine(new PdfPen(PdfBrushes.DarkBlue, 2f), point3, point4);
           PointF point5 = new PointF(0, 30);
           PointF point6 = new PointF(blinkConverterSettings.PdfPageSize.Width, 30);
           //Draw the line on PDF document
           header.Graphics.DrawLine(new PdfPen(PdfBrushes.DarkBlue, 2f), point5, point6);
           PointF point7 = new PointF(0, 33);
           PointF point8 = new PointF(blinkConverterSettings.PdfPageSize.Width, 33);
           //Draw the line on PDF document
           header.Graphics.DrawLine(new PdfPen(PdfBrushes.DarkBlue, 1f), point7, point8);
           //Create font and brush for header element.
           PdfFont font = new PdfStandardFont(PdfFontFamily.Helvetica, 20);
           string text = "Syncfusion Essential PDF";
           SizeF textSize = font.MeasureString(text);
           float headerContentWidth = (blinkConverterSettings.PdfPageSize.Width - textSize.Width) / 2;
           PointF bounds = new PointF(headerContentWidth, 5);
           //Draw the header string in header template element.
           header.Graphics.DrawString(text, font, PdfBrushes.DarkBlue, bounds);
           //Assign the header element to PdfHeader of Blink converter settings.
           blinkConverterSettings.PdfHeader = header;
           //Set the bounds for header
           RectangleF footerBounds = new RectangleF(0, 0, blinkConverterSettings.PdfPageSize.Width, 20);
           //Create PDF page template element for footer with bounds.
           PdfPageTemplateElement footer = new PdfPageTemplateElement(footerBounds);
           PdfFont font1 = new PdfStandardFont(PdfFontFamily.Helvetica, 10);
           //Create page number field.
           PdfPageNumberField pageNumber = new PdfPageNumberField(font1, PdfBrushes.Gray);
           //Create page count field.
           PdfPageCountField count = new PdfPageCountField(font1, PdfBrushes.Gray);
           //Add the fields in composite fields.
           PdfCompositeField compositeField = new PdfCompositeField(font1, PdfBrushes.Gray, "Page {0} of {1}", pageNumber, count);
           string text1 = "@Copyright 2016";
           SizeF textSize1 = font.MeasureString(text1);
           float footerContentWidth = (blinkConverterSettings.PdfPageSize.Width - textSize1.Width) / 2;
           PointF bounds1 = new PointF(footerContentWidth, 5);
           //Draw the header string in header template element.
           footer.Graphics.DrawString(text1, font1, PdfBrushes.Gray, bounds1);
           //Draw the composite field in footer
           compositeField.Draw(footer.Graphics, new PointF(450, 5));
           //Assign the footer element to PdfFooter of Blink converter settings.
           blinkConverterSettings.PdfFooter = footer;
           //Set Blink viewport size.
           blinkConverterSettings.ViewPortSize = new Size(1024, 0);
           htmlConverter.ConverterSettings = blinkConverterSettings;
           //Convert URL to PDF.
           PdfDocument document = htmlConverter.Convert("https://www.google.com/");
           //Create a file stream.
           FileStream fileStream = new FileStream("Output.pdf", FileMode.Create, FileAccess.ReadWrite);
           //Save a PDF document to the file stream.
           document.Save(fileStream);
           //Close the document.
           document.Close(true);

VB.NET

' Initialize HTML to PDF converter.
Dim htmlConverter As New HtmlToPdfConverter()
Dim blinkConverterSettings As New BlinkConverterSettings()
'Set the bounds for header
Dim headerBounds As New RectangleF(0, 0, blinkConverterSettings.PdfPageSize.Width, 35)
'Create PDF page template element for header with bounds.
Dim header As New PdfPageTemplateElement(headerBounds)
'Create the line points
Dim point1 As New PointF(0, 0)
Dim point2 As New PointF(blinkConverterSettings.PdfPageSize.Width, 0)
'Draw the line on PDF document
header.Graphics.DrawLine(New PdfPen(PdfBrushes.DarkBlue, 1.0F), point1, point2)
Dim point3 As New PointF(0, 3)
Dim point4 As New PointF(blinkConverterSettings.PdfPageSize.Width, 3)
'Draw the line on PDF document
header.Graphics.DrawLine(New PdfPen(PdfBrushes.DarkBlue, 2.0F), point3, point4)
Dim point5 As New PointF(0, 30)
Dim point6 As New PointF(blinkConverterSettings.PdfPageSize.Width, 30)
'Draw the line on PDF document
header.Graphics.DrawLine(New PdfPen(PdfBrushes.DarkBlue, 2.0F), point5, point6)
Dim point7 As New PointF(0, 33)
Dim point8 As New PointF(blinkConverterSettings.PdfPageSize.Width, 33)
'Draw the line on PDF document
header.Graphics.DrawLine(New PdfPen(PdfBrushes.DarkBlue, 1.0F), point7, point8)
'Create font and brush for header element.
Dim font As New PdfStandardFont(PdfFontFamily.Helvetica, 20)
Dim text As String = "Syncfusion Essential PDF"
Dim textSize As SizeF = font.MeasureString(text)
Dim headerContentWidth As Single = (blinkConverterSettings.PdfPageSize.Width - textSize.Width) / 2
Dim bounds As New PointF(headerContentWidth, 5)
'Draw the header string in header template element.
header.Graphics.DrawString(text, font, PdfBrushes.DarkBlue, bounds)
'Assign the header element to PdfHeader of Blink converter settings.
blinkConverterSettings.PdfHeader = header
'Set the bounds for footer
Dim footerBounds As New RectangleF(0, 0, blinkConverterSettings.PdfPageSize.Width, 20)
'Create PDF page template element for footer with bounds.
Dim footer As New PdfPageTemplateElement(footerBounds)
Dim font1 As New PdfStandardFont(PdfFontFamily.Helvetica, 10)
'Create page number field.
Dim pageNumber As New PdfPageNumberField(font1, PdfBrushes.Gray)
'Create page count field.
Dim count As New PdfPageCountField(font1, PdfBrushes.Gray)
'Add the fields in composite fields.
Dim compositeField As New PdfCompositeField(font1, PdfBrushes.Gray, "Page {0} of {1}", pageNumber, count)
Dim text1 As String = "@Copyright 2016"
Dim textSize1 As SizeF = font.MeasureString(text1)
Dim footerContentWidth As Single = (blinkConverterSettings.PdfPageSize.Width - textSize1.Width) / 2
Dim bounds1 As New PointF(footerContentWidth, 5)
'Draw the header string in header template element.
footer.Graphics.DrawString(text1, font1, PdfBrushes.Gray, bounds1)
'Draw the composite field in footer
compositeField.Draw(footer.Graphics, New PointF(450, 5))
'Assign the footer element to PdfFooter of Blink converter settings.
blinkConverterSettings.PdfFooter = footer
'Set Blink viewport size.
blinkConverterSettings.ViewPortSize = New Size(1024, 0)
htmlConverter.ConverterSettings = blinkConverterSettings
'Convert URL to PDF.
Dim document As PdfDocument = htmlConverter.Convert("https://www.google.com/")
'Create a file stream.
Dim fileStream As New FileStream("Output.pdf", FileMode.Create, FileAccess.ReadWrite)
'Save a PDF document to the file stream.
document.Save(fileStream)
'Close the document.
document.Close(True)

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

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

Take a moment to peruse the documentation, where you can find 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.

Conclusion

I hope you enjoyed learning about how to add HTML as header and footer in PDF while converting HTML to PDF.

You can refer to our WinForms PDF feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!