ASP.NET Core Web API中生成带固定页眉页脚与动态内容的PDF

你当前用position: fixed实现页眉页脚的方式，在DinkToPDF（底层依赖wkhtmltopdf）中无法正确适配自动分页逻辑。要实现每页固定页眉页脚+动态内容自动分页，需要结合CSS的@page规则来配置，以下是修正后的完整实现：

关键调整说明 #

• 用@page规则定义页面边距，专门为页眉、页脚预留空间
• 通过@top-center、@bottom-center伪元素直接设置页眉页脚内容与样式
• 调整内容区域的上下margin，避免内容与页眉页脚重叠
• 确保动态内容超出一页时自动触发分页

修正后的完整代码 #

[HttpPost]
[Route("generatepdf")]
public IActionResult GeneratePdf([FromBody] PdfGenerationRequest request)
{
    try
    {
        var htmlContent = $@"
        <html>
        <head>
            <style>
                /* 定义页面边距，为页眉页脚预留空间 */
                @page {{
                    size: A4 portrait;
                    margin-top: 80px; /* 页眉高度+留白 */
                    margin-bottom: 60px; /* 页脚高度+留白 */
                    margin-left: 20px;
                    margin-right: 20px;

                    /* 定义页眉内容 */
                    @top-center {{
                        content: '固定页眉';
                        background-color: #007bff;
                        color: white;
                        padding: 10px 0;
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                    }}

                    /* 定义页脚内容 */
                    @bottom-center {{
                        content: '固定页脚';
                        background-color: #007bff;
                        color: white;
                        padding: 10px 0;
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                    }}
                }}

                /* 动态内容区域，避开页眉页脚预留的边距 */
                .content {{
                    font-size: 14px;
                    line-height: 1.6;
                }}

                /* 强制分页样式（可选，如需手动控制分页位置） */
                .page-break {{
                    page-break-after: always;
                }}
            </style>
        </head>
        <body>
            <div class='content'>{request.DynamicContent}</div>
        </body>
        </html>";

        var pdf = new HtmlToPdfDocument()
        {{
            GlobalSettings = {{
                ColorMode = ColorMode.Color,
                Orientation = Orientation.Portrait,
                PaperSize = PaperKind.A4,
                // 确保启用页眉页脚的CSS规则解析
                Margins = new MarginSettings { Top = 80, Bottom = 60, Left = 20, Right = 20 }
            }},
            Objects = {{
                new ObjectSettings() {{
                    HtmlContent = htmlContent,
                    WebSettings = new WebSettings { DefaultEncoding = "utf-8" }
                }}
            }}
        }};

        var file = _converter.Convert(pdf);
        return File(file, "application/pdf", "output.pdf");
    }
    catch (Exception ex)
    {
        return StatusCode(500, $"生成PDF时发生错误: {ex.Message}");
    }
}

额外注意事项 #

1. 确保已安装对应平台的DinkToPDF运行时包：
   • Windows环境：安装DinkToPdf.Runtime.Windows NuGet包
   • Linux环境：安装DinkToPdf.Runtime.Linux NuGet包
2. 如果需要显示页码，可以在页脚伪元素中使用counter(page)变量，例如：content: '第 ' counter(page) ' 页';
3. 动态内容中的长文本会自动触发分页，无需额外处理；如需手动分页，可在内容中添加<div class='page-break'></div>

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