如何解决Rotativa生成PDF时页眉页脚区域内容被遮挡问题

云原生阿岚

2026-8-6

解决Rotativa生成PDF时多页内容被页眉页脚遮挡的问题

Rotativa依赖wkhtmltopdf渲染PDF，默认页眉页脚会占用页面上下区域，当内容超过一定页数后，若主体内容的边距未预留足够空间，就会出现重叠遮挡问题。以下是几个实用解决办法：

1. 直接设置页面边距（最有效）

在生成PDF的C#代码中，通过PageMargins参数调整页面上下边距，给页眉页脚留出专属空间：

// 替换为你实际的PDF生成代码
return new ViewAsPdf("Index")
{
    PageMargins = new Margins
    {
        Top = 50,    // 上边距设为50mm，可根据页眉实际高度调整
        Bottom = 30, // 下边距设为30mm，适配页脚高度
        Left = 15,
        Right = 15
    },
    PageOrientation = Orientation.Portrait
};

2. 自定义页眉页脚时添加间距

如果使用了自定义页眉页脚视图，记得同时设置HeaderSpacing和FooterSpacing参数，拉开与主体内容的距离：

return new ViewAsPdf("Index")
{
    CustomHeaderHtml = Url.Action("Header", "Shared"),
    CustomFooterHtml = Url.Action("Footer", "Shared"),
    PageMargins = new Margins { Top = 60, Bottom = 40 },
    HeaderSpacing = 10, // 页眉与主体内容的间距
    FooterSpacing = 10  // 页脚与主体内容的间距
};

3. 优化打印样式CSS

在视图的CSS中，针对打印介质给主体内容添加上下内边距，避免内容进入页眉页脚区域：

@media print {
    body {
        padding-top: 60px; /* 数值对应页面上边距，确保内容不被页眉遮挡 */
        padding-bottom: 40px; /* 数值对应页面下边距，避开页脚 */
    }
    .page-break { 
        display: block; 
        page-break-before: always; 
    }
}