ASP.NET MVC中HTML Renderer生成PDF空白，HTML/CSS失效求助

1. HTML属性语法错误 #

你的代码中div的id属性存在语法错误：

<div id=&quot;&quot;topContainer&quot;&quot;>

这会生成无效的HTML（id值被包裹在两对双引号中），虽然浏览器具备容错能力，但HTML Renderer的解析器可能无法正确识别该元素，导致样式失效或内容无法渲染。

修正方式：将其改为标准的单对双引号格式：

<div id=&quot;topContainer&quot;>

2. CSS Flex布局兼容性问题 #

HTML Renderer（尤其是旧版本）对CSS Flexbox的支持不完善。你给body设置的display: flex+justify-content: center+align-items: center组合，可能导致内容被定位到PDF页面的可视区域外，从而显示空白。

修正方式：

• 暂时移除body的flex布局属性，改用传统的块级布局：

body {
    padding: 20px; /* 减小内边距避免内容溢出页面 */
    background-color: antiquewhite;
}

• 如果需要保留topContainer的flex布局，确保容器内有至少两个子元素（否则justify-content: space-between不会产生效果），比如添加发票编号：

<div id=&quot;topContainer&quot;>
    <p>Date: {DateTimeNow}</p>
    <p>Invoice #INV-2024001</p>
</div>

3. 内容溢出页面 #

你设置了body { padding: 50px; }，结合A4纸的默认边距，可能导致内容超出PDF页面范围，被截断或不显示。

修正方式：

• 减小body的padding值（比如改为20px）；
• 或者在生成PDF时显式指定页面边距：

PdfGenerator.AddPdfPages(document, HtmlContent, PageSize.A4, 20); // 20为页面边距（单位：pt）

4. 简化测试排查 #

如果以上修改后仍有问题，先简化HTML内容，排除样式干扰：

string HtmlContent = $@"
<html>
<head>
    <style>
        body {{ padding: 10px; }}
    </style>
</head>
<body>
    <h1>Test Invoice</h1>
    <p>Date: {DateTimeNow}</p>
</body>
</html>";

如果这个基础版本能生成内容，再逐步添加样式和布局元素，定位具体的问题点。

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