使用Aspose.HTML生成PDF：如何添加页码并重复页脚？

Hey there! Let's tackle your Aspose.HTML to PDF issues—getting the footer to repeat and adding page numbers. The key here is leveraging CSS Paged Media (which Aspose fully supports) to define persistent headers/footers and inject page counters.

1. Fix Repeating Footer & Add Page Numbers with CSS #

Aspose.HTML honors CSS @page rules and running elements, which are perfect for repeating headers/footers. Here's how to modify your HTML's styles and structure:

Update Your CSS

Add these rules to your <style> section to define page margins, capture your header as a repeating element, and set up a footer with page numbers:

/* Define page dimensions and margins to make space for header/footer */
@page {
    size: 816px 1056px; /* Matches your body width (8.5in @96dpi) + standard letter height (11in @96dpi) */
    margin: 130px 20px 50px 20px; /* Top margin for header, bottom for footer */

    /* Repeat your header on every page */
    @top-center {
        content: element(header);
    }

    /* Footer with page counter */
    @bottom-center {
        content: "Page " counter(page) " of " counter(pages);
        font-family: 'Roboto', sans-serif;
        font-size: 12px;
        color: #333;
        text-align: center;
    }
}

/* Mark your header table as a running element to repeat it */
.header {
    position: running(header);
    width: 100%;
}

/* Optional: If you need a custom repeating footer (beyond just page numbers) */
.footer {
    position: running(footer);
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    color: #666;
}

/* Uncomment below if using a custom footer */
/* @page {
    @bottom-left {
        content: element(footer);
    }
} */

Modify Your HTML Structure

• Add a header class to your top table (the one you want to repeat as a header):

<table class='header'>
    <tr>
        <td>
            <table class='top-abc_abc-td'>
                <!-- Your existing header content here -->
            </table>
        </td>
    </tr>
</table>

• If you want a custom repeating footer (not just page numbers), add this right before your closing </body> tag:

<div class='footer'>
    Your Custom Footer Text | Company Name
</div>

2. Verify Your Aspose.HTML Conversion Code #

Make sure your C# code is set up to respect the CSS page settings (though it should by default). Here's a standard conversion snippet:

using Aspose.Html;
using Aspose.Html.Converters;
using Aspose.Html.Saving;
using Aspose.Html.Drawing;

// Load your HTML document
var document = new HTMLDocument("your-input-file.html");

// Configure PDF save options (match page size to your CSS if needed)
var pdfOptions = new PdfSaveOptions();
pdfOptions.PageSetup.AnyPage = new Page(new Size(Length.FromPixels(816), Length.FromPixels(1056)));

// Convert to PDF
Converter.ConvertHTML(document, pdfOptions, "output.pdf");

Why This Works #

• position: running(header) tells Aspose to capture that element and reuse it in the @top-center area defined in @page.
• counter(page) and counter(pages) are built-in CSS counters that automatically track the current page and total pages.
• The @page margins ensure your main content doesn't overlap with the header/footer areas.

Troubleshooting Tips #

• If your footer still doesn't show, double-check that your @page margins are large enough to fit the footer content.
• Ensure you're using a recent version of Aspose.HTML—older versions might have limited support for advanced CSS Paged Media features.
• If your header is cut off, adjust the top margin in @page to match the height of your header element.

内容的提问来源于stack exchange，提问作者user7850444