How to Insert a Page Number in the HTML Footer Using the Inline Style

The Syncfusion® HTML to PDF converter is a .NET library for converting webpages, SVG, MHTML, and HTML to PDF using C#. It is reliable and accurate. The result preserves all graphics, images, texts, fonts, and the layout of the original HTML document or webpage.

Using this library, you can insert a page number in the HTML footer using the inline style.

Steps to insert a page number in the HTML footer using the inline style to PDF document

1. Create a new C# console application project.
2. Install the Syncfusion.HtmlToPdfConverter.WinForms NuGet package as a reference to your .NET Framework application from NuGet.org.
   
3. Include the following namespaces in the Program.cs file.

C#

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

VB.NET

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

4. Use the following code sample to insert a page number in the HTML Footer in a PDF file.

C#

//Initialize HTML to PDF converter.
           HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter();
           //Initialize blink converter settings. 
           BlinkConverterSettings blinkConverterSettings = new BlinkConverterSettings();
           //Set the Blink viewport size.
           blinkConverterSettings.ViewPortSize = new Size(800, 0);
           //Set the HTML margin-top value based on the HTML header height and margin-top value.
           blinkConverterSettings.Margin.Top = 70;
           /Set the HTML margin-bottom value based on the HTML footer height and margin-bottom. value.
           blinkConverterSettings.Margin.Bottom = 40;
           //Set the custom HTML header to add at the top of each page.
           blinkConverterSettings.HtmlHeader = "<span style=\"font-size: 13px; font-weight: bold; text-align: center; margin-left: 300px; \">HTML to PDF Converter</span></span>";
           //Set the custom HTML footer to add at the bottom of each page.
           blinkConverterSettings.HtmlFooter = "<span style=\"font-size: 8px; margin-left: 340px;\">Page <span class=\"pageNumber\"></span> of <span class=\"totalPages\"></span></span>";
           //Assign Blink converter settings to the HTML converter.
           htmlConverter.ConverterSettings = blinkConverterSettings;
           //Convert the URL to a PDF document.
           PdfDocument document = htmlConverter.Convert(Path.GetFullPath("../../../Data/HtmlSample.html"));
           //Create a file stream.
           FileStream fileStream = new FileStream("Output.pdf", FileMode.Create, FileAccess.ReadWrite);
           //Save and close a PDF document.
           document.Save(fileStream);
           document.Close(true);

VB.NET

'Initialize HTML to PDF converter.
       Dim htmlConverter As New HtmlToPdfConverter()

       'Initialize blink converter settings.
       Dim blinkConverterSettings As New BlinkConverterSettings()

       'Set the Blink viewport size.
       blinkConverterSettings.ViewPortSize = New Size(800, 0)

       'Set the HTML margin-top value based on the HTML header height and margin-top value.
       blinkConverterSettings.Margin.Top = 70

       'Set the HTML margin-bottom value based on the HTML footer height and margin-bottom value.
       blinkConverterSettings.Margin.Bottom = 40

       'Set the custom HTML header to add at the top of each page.
       blinkConverterSettings.HtmlHeader = "<span style=""font-size: 13px; font-weight: bold; text-align: center; margin-left: 300px;"">HTML to PDF Converter</span>"

       'Set the custom HTML footer to add at the bottom of each page.
       blinkConverterSettings.HtmlFooter = "<span style=""font-size: 8px; margin-left: 340px;"">Page <span class=""pageNumber""></span> of <span class=""totalPages""></span></span>"

       'Assign Blink converter settings to the HTML converter.
       htmlConverter.ConverterSettings = blinkConverterSettings

       'Convert the URL to a PDF document.
       Dim document As PdfDocument = htmlConverter.Convert(Path.GetFullPath("../../../Data/HtmlSample.html"))

       'Create a file stream.
       Dim fileStream As New FileStream("Output.pdf", FileMode.Create, FileAccess.ReadWrite)

       'Save and close a PDF document.
       document.Save(fileStream)
       document.Close(True)

Download the work sample from HTMLFooter.zip.

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

Take a moment to peruse the documentation, where you can find converting HTML pages to PDF document along with respective customization options and features.

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