如何为Rotativa生成的动态内容PDF添加自适应页脚？

嘿Lorenzo，我之前也踩过Rotativa分页页脚的坑，它基于wkhtmltopdf封装，其实有几种靠谱的方案能搞定自适应页码的页脚，纯CSS没成功大概率是没用到正确的规则或者Rotativa的内置特性，给你分享几个实用方法：

方案1：利用Rotativa内置的页眉页脚参数（最推荐） #

Rotativa直接封装了wkhtmltopdf的页脚配置，不用自己计算页数，代码里直接设置就能自动生成页码。比如在MVC的Action里这么写：

public ActionResult ExportToPdf()
{
    // 获取你的业务数据模型
    var viewModel = GetYourBusinessData();
    
    return new ViewAsPdf("YourHtmlView", viewModel)
    {
        // 配置页脚
        Footer = new FooterSettings
        {
            // 用内置占位符自动生成页码：[page]是当前页，[topage]是总页数
            Right = "Page [page] of [topage]",
            Left = "你的公司名称",
            FontSize = 10,
            Spacing = 5 // 页脚和正文的间距，避免内容重叠
        }
    };
}

如果需要更复杂的页脚（比如带样式、动态业务内容），可以指定一个单独的页脚视图：

Footer = new FooterSettings
{
    HtmlUrl = Url.Action("PdfFooter"), // 指向返回页脚HTML的Action
    FontSize = 10,
    Spacing = 8
};

对应的PdfFooter.cshtml视图可以这么写，wkhtmltopdf会自动替换.page和.topage类的内容：

<div style="text-align: center; width: 100%; padding: 5px; border-top: 1px solid #eee;">
    <span>生成日期：@DateTime.Now.ToString("yyyy-MM-dd HH:mm")</span>
    <span style="margin-left: 30px;">Page <span class="page"></span> of <span class="topage"></span></span>
</div>

方案2：使用CSS @page 规则实现 #

如果你更倾向于用CSS控制，要注意wkhtmltopdf对CSS分页规则的支持细节，正确写法如下：

/* 定义页面尺寸和边距，底部边距要留足页脚空间 */
@page {
    size: A4;
    margin: 2cm 2cm 3cm 2cm; 

    /* 右下角显示页码 */
    @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
        font-size: 10px;
        color: #666;
    }

    /* 左下角添加自定义版权内容 */
    @bottom-left {
        content: "版权所有 © 2024";
        font-size: 10px;
        color: #666;
    }
}

/* 确保页面计数器生效 */
body {
    counter-reset: page;
}

⚠️ 注意：这个方法要确保正文内容不会撑满整个页面，底部边距必须足够，否则页脚会被内容覆盖。另外，旧版本的Rotativa对CSS @page的支持可能有问题，建议升级到最新版。

排查纯CSS失败的常见原因 #

如果你之前用CSS没成功，大概率是这几个问题：

• 没有给页面设置足够的底部边距，页脚被正文遮挡
• 用了wkhtmltopdf不支持的CSS属性（比如某些复杂flex布局在分页时的异常）
• 没有正确启用页面计数器，或者计数器的作用域不对

优先试试方案1，这是Rotativa官方推荐的方式，适配性最好，不用自己处理分页逻辑。

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