Adding Headers, Footers, and Page Numbers to HTML

Question

Hello everyone and thanks for your help in advance. I am learning iText 7 and am creating an application that pulls a webpage from a URL and converts it to PDF. I've got the very basic pieces working, i.e. grabbing the page, converting it to PDF, and writing it to disk. What I want to accomplish next is to add headers and footers as well as Page x of y. I've tried:

        @media print {
        @page {
            size: 8.5in 5.5in portrait;
            margin-left: 0.5cm;
            margin-right: 0.5cm;
            margin-bottom: .5cm;
            padding-bottom: 3.5cm;
            background: #FFF;
        }

        thead { display: table-header-group; }
        tfoot { display: table-footer-group; }
    }

which seems to place the header and footer on each page, although the last page of the document has the footer placed after where the last element appears (not ideal). Since I'm grabbing a page, I'm not really sure how to add the page number and count. So my question is how to tackle this, i.e. should I just stick with the media query, or should I generate the PDF, the loop through using some type of handler to insert the headers and footers (or should I do this upon creation of the initial document). I now there are some tutorials on paging, but not combined with converting a webpage, so I am confused (maybe needlessly) about how to proceed. Any help would be appreciated.

I tried:

        @media print {
        @page {
            size: 8.5in 5.5in portrait;
            margin-left: 0.5cm;
            margin-right: 0.5cm;
            margin-bottom: .5cm;
            padding-bottom: 3.5cm;
            background: #FFF;

        @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
        }   
        }

        thead { display: table-header-group; }
        tfoot { display: table-footer-group; }
    }

but the page number does not display, either on the HTML or converted PDF. I needed to use:thead { display: table-header-group; } tfoot { display: table-footer-group; } to force the header and footer to display on each page. Obviously I'm not handling this correctly, but don't know what to try next.

`

enter code here

Answer 1

You want page headers and footers, but looking at your CSS, I don't see you defining page headers or footers anywhere (<thead> and <tfoot> are for tables, not for pages). You want to add "Page X of Y" to every page, but I don't see you define that content anywhere.

Please read Chapter 2 of the tutorial on converting HTML to PDF. In one of the examples, you'll see:

@page {
    @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

This defines a footer at the bottom-right of each page, with as content "Page X of Y" where X will be the current pages and Y the total number of pages.

Read more about the @page rule and you'll discover that you can also define an @bottom-left, @bottom-center, @top-left, and so on.

Also be aware of the fact that you use @media print which means that whatever is in-between those brackets will only be looked at by iText if you define the right media query. See Chapter 3 of the tutorial.

FINAL UPDATE:

I took the following example from the tutorial: C03E02_Print

public static void main(String[] args) throws IOException {
    File file = new File(TARGET);
    file.mkdirs();
    new Kmcnet().createPdf(BASEURI, SRC, DEST);
}

public void createPdf(String baseUri, String src, String dest) throws IOException { 
    ConverterProperties properties = new ConverterProperties();
    properties.setBaseUri(baseUri);
    MediaDeviceDescription mediaDeviceDescription = new MediaDeviceDescription(MediaType.PRINT);
    properties.setMediaDeviceDescription(mediaDeviceDescription);
    HtmlConverter.convertToPdf(new FileInputStream(src), new FileOutputStream(dest), properties);
}

I took the sxsw.html page, and I changed the sxsw_print.css like this:

@page {
    @top-left {
        content: "HEADER";
    }
    @top-center {
        content: "READ THE TUTORIAL";
    }
    @top-right {
        content: "kmcnet";
    }
    @bottom-left {
        content: "FOOTER";
    }
    @bottom-center {
        content: "Page " counter(page) " of " counter(pages);
    }
    @bottom-right {
        content: "The end";
    }
}

I ran the code and this was the result:

The OP, kmcnet, claims that there is no "Page X of Y" on the pages, but if you look closely, you can see "Page 1 of 2" and "Page 2 of 2" in the middle at the bottom of the pages on the screen shot. Furthermore, kmcnet claims that it's impossible to add customer names in the header or footer, but if you look at the screen shot, you clearly see "kmcnet" in the upper right corner of the pages.

Then I took the movies2.html file, and I changed the inline CSS like this:

<style>
@media print {
    @page {
        @top-left {
            content: "HEADER";
        }
        @top-center {
            content: "READ THE TUTORIAL";
        }
        @top-right {
            content: "kmcnet";
        }
        @bottom-left {
            content: "FOOTER";
        }
        @bottom-center {
            content: "Page " counter(page) " of " counter(pages);
        }
        @bottom-right {
            content: "The end";
        }
    }
}
</style>

I ran the C03E02_Print example on that HTML, and the result showed similar headers and footers:

The original question was:

What I want to accomplish next is to add headers and footers as well as Page x of y.

I think that my answer and the tutorial explained adequately how to do this. Unfortunately, the OP persists in saying that my answer doesn't work, nor what is written in the tutorial.

I will make the question as off-topic, more specifically as a problem that can't be reproduced:

Answer 2

I was able to create a custom footer by modifying the css style in the html header. This example is with ASP.NET MVC. The styles are dynamically populated in the view. If the footer is different for each customer, it would be better to generate a pdf for each customer and then merge them.

The razor view

@model YourNamespace.ViewModels.XYZViewModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <style type="text/css">
        @@page {
            @@bottom-left {
                content: "@Model.FullName";
            }

            @@bottom-center {
                content: "@DateTime.Now.ToShortDateString()";
            }

            @@bottom-right {
                content: "Page " counter(page);
            }
        }
    </style>
</head>
...............

The view can then be generated to HTML

public static string RenderView<TModel>(this Controller controller, string viewName, TModel model)
        {
            using (var sw = new StringWriter())
            {
                controller.ViewData.Model = model;
                var viewResult = ViewEngines.Engines.FindView(controller.ControllerContext, viewName, "");
                var viewContext = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData, controller.TempData, sw);
                viewResult.View.Render(viewContext, sw);
                viewResult.ViewEngine.ReleaseView(controller.ControllerContext, viewResult.View);
                return sw.GetStringBuilder().ToString();
            }
        }

The call to render the view to HTML in the controller

string html = this.RenderView(@"~\Views\Folder\ViewName.cshtml", viewModel);