Adding a Header to each page via HTML

Aspose.HTML Product Family
1

Is it possible to add a header in my HTML, which will be shown ever page generated when converting it to pdf?

what i’ve tried:

        public byte[] ConvertHtmlToPdf(string data)
        {
            using (var streamProvider = new MemoryStreamProvider())
            {
                using (var document = new HTMLDocument(data, "."))
                {
                    string headerHtml = @"
                <div class='header' style='position: fixed; top: 0; left: 0; bottom: 50px; width: 100%; text-align: center; font-size: 16px;'>
                    <p>Header Content Goes Here</p>
                </div>
            ";

                    var body = document.GetElementsByTagName("body").First();

                    var headerElement = document.CreateElement("div");
                    headerElement.InnerHTML = headerHtml;

                    body.InsertBefore(headerElement, body.FirstChild);


                    var options = new PdfSaveOptions()
                    {
                        JpegQuality = 100,
                        
                    };

                    options.PageSetup.AnyPage = new Page(
                        margin: new Margin(left: 20, top: 80, right: 10, bottom: 10)
                    );

                    FontsSettings fontsSettings = new FontsSettings();
                    fontsSettings.SetFontsLookupFolder(Path.Combine(AppContext.BaseDirectory, "Fonts"));

                    Aspose.Html.Converters.Converter.ConvertHTML(document, options, streamProvider);

                    var memory = streamProvider.Streams.First();
                    memory.Seek(0, SeekOrigin.Begin);

                    return memory.ToArray();
                }
            }
        }

combined with html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            position: relative;
        }
        .section {
            margin-bottom: 20px;
        }
        .footer {
            width: 100%;
            text-align: center;
            position: fixed;
            left: 0;
        }
        .footer {
            bottom: 0;
            border-top: 1px solid #ccc;
            padding: 10px 0;
        }
        .header img, .footer img {
            max-width: 150px;
        }
        .disclaimer {
            border: 1px solid #ccc;
            padding: 150px;
            border-radius: 5px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid #ccc;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
        .page-break {
            page-break-before: always;
        }
    </style>
</head>
<body>
  
    <div class="main-content">
        <div class="summary section">
            <h2>Summary</h2>
          <p>Paragraph</p>
        </div>
          
<div class="standard-table section page-break">
    <h2>A table</h2>
    <StandardEquipmentTable>
</div>

        <div class="disclaimer section page-break">
                      <p>A disclaimer</p>
            <p><Disclaimer></p>
        </div>
    </div>

    <div class="footer">
        <p><Reference></p>
        <img src="<Logo>">
        <p><DocumentDate></p>
    </div>
</body>
</html>

however this pushes both the header section i’ve put in my c# and the body down.

2

@chrisroi

To add a header to each page when converting HTML to PDF using Aspose, you may need to consider using Aspose.PDF instead of Aspose.HTML. Aspose.PDF provides more robust features for adding headers and footers to PDF documents after conversion.

Here’s a general approach you can follow:

  1. Convert HTML to PDF: First, convert your HTML content to a PDF document.
  2. Add Headers and Footers: After the conversion, you can add headers and footers to each page of the PDF.

Here’s a code example demonstrating how to achieve this:

using Aspose.Pdf;
using Aspose.Pdf.HtmlLoadOptions;
using Aspose.Pdf.Text;

// Load HTML into a Document
HtmlLoadOptions options = new HtmlLoadOptions();
Document pdfDocument = new Document("input.html", options);

// Create header and footer content
string headerHtml = "<h1>Header Content</h1>";
string footerHtml = "<h1>Footer Content</h1>";

// Loop through each page to add header and footer
foreach (Page page in pdfDocument.Pages)
{
    HeaderFooter header = new HeaderFooter();
    HeaderFooter footer = new HeaderFooter();

    // Set margins for header and footer
    header.Margin = new MarginInfo(0, 0, 0, 0);
    footer.Margin = new MarginInfo(0, 0, 0, 0);

    // Add header and footer content
    header.Paragraphs.Add(new HtmlFragment(headerHtml));
    footer.Paragraphs.Add(new HtmlFragment(footerHtml));

    // Assign header and footer to the page
    page.Header = header;
    page.Footer = footer;
}

// Save the updated PDF
pdfDocument.Save("output.pdf");

Key Points:

  • The HtmlLoadOptions class is used to load the HTML content.
  • You can create HeaderFooter objects for both the header and footer, set their margins, and add HTML content using HtmlFragment.
  • Finally, save the document to persist the changes.

This method allows you to have a consistent header and footer across all pages of your PDF document. If you need more advanced features or specific formatting, consider exploring the Aspose.PDF documentation for additional options.

For further details, you may want to check the official documentation or related forum discussions on how to effectively use Aspose.PDF for your needs.

Sources:
[1]: How to add Header/Footer using Aspose.Html

3

Is it possible to use Aspose.Pdf without a watermark?

Our company has a full Aspose.Html licence, but not an Aspose.Pdf one.

I have also tried by using Aspose.Pdf, but get a watermark:

Evaluation Only. Created with Aspose.PDF. Copyright 2002-2021 Aspose Pty Ltd.

4

@chrisroi

We are afraid that you cannot use Aspose.PDF and generate an output without watermark if you don’t have its license. On the other hand, we have logged an investigation ticket as HTMLNET-5978 in our issue tracking system to analyze the feasibility of header/footer in HTML during HTML to PDF Conversion. As soon as we make some progress regarding ticket resolution, we will inform you. Please be patient and spare us some time.

5

Thanks Asad.

Yes, a header and footer during HTML conversion would make sense as HTML has header and footer tags.

I will follow the progress, thank you.