HtmlRenderer.PdfSharp：仅当图像存在时 Acrobat Reader 中的某些页面为空白

Question

我正在使用 HtmlRenderer (1.5.0.6) 和 PdfSharp (1.32.3057) 从 HTML 生成 PDF，HTML 是通过将大量数据传递到 Razor 模板而生成的。数据被渲染成一个表，其中包含一些标题值，这些值排列在四列标签和值对中，而正文是节标题的一系列 div 和每个节中每行数据的表，跨越六列数据。结果可以扩展到第二或第三（或更多）页。

某些结果行包含图像。如果存在任何单个结果的图像，它们将被放置在一个表格行中，该行跨越单个单元格中的六列。

一切都很好。 . .直到在 Adob​​e Acrobat Reader 中查看 PDF。在 Chrome、IE 或 Edge 中，没有问题。正如预期的那样，完整的结果显示了所需的尽可能多的页面。在 Acrobat 中，只有第一页显示内容和图像，所有后续页面都是空白的。

仅当存在图像时才会发生这种情况。如果没有包含任何结果的图像，则 PDF 将按预期在所有页面上显示在 Acrobat 中。问题不在于图像的存在，因为它们显示在 Acrobat 的第一页上。

Viewed in Chrome

Viewed in Acrobat Reader

这是生成的 HTML，它横跨分页符的正上方和下方：

<div class="section header">Emergency Plan</div>
<table class="answers">
    <thead>
        <tr>
            <th class="column-width-double"></th>
            <th class="column-width-half"></th>
            <th class="column-width-double"></th>
            <th class="column-width"></th>
            <th class="column-width"></th>
            <th class="column-width-half"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Exits plans posted</td>
            <td colspan="4"></td>
            <td class="green">OK</td>
        </tr>
        <tr class="issue-row">
            <td>Emergency contact info accurate</td>
            <td>Issue</td>
            <td>Emergency contact info accurate Issue</td>
            <td>Unassigned</td>
            <td>Misc.</td>
            <td>Not Down</td>
        </tr>
        <tr>
            <td colspan="6">
                <img class="question-image" src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj9=" />
                <img class="question-image" src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCACiAOwDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFB=" />
                <br/>
                <br/>
            </td>
        </tr>
        <tr>
            <td>Exit drill performed annually</td>
            <td colspan="4"></td>
            <td class="green">OK</td>
        </tr>
    </tbody>
</table>
<div class="section header">Ladders</div>
<table class="answers">
    <thead>
        <tr>
            <th class="column-width-double"></th>
            <th class="column-width-half"></th>
            <th class="column-width-double"></th>
            <th class="column-width"></th>
            <th class="column-width"></th>
            <th class="column-width-half"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Safety feet, good condition, labels intact, used properly</td>
            <td colspan="4"></td>
            <td class="green">OK</td>
        </tr>
        <tr>
            <td>Monthly checks completed and documented</td>
            <td colspan="4"></td>
            <td class="green">OK</td>
        </tr>
    </tbody>
</table>

在用尽我能找到的所有选项之后，我想知道 HTML 中是否存在 HtmlRenderer 或 PdfSharp 不满意的内容，导致 Acrobat Reader 更加不满意？

我在生成的 HTML 中找不到任何畸形。

编辑：预感可能是 BR 标签引起了问题，我用 CSS 中的一些 padding-bottom 替换了它们。这也没有帮助。

编辑：找到一台安装了 Full Acrobat 的机器。在那里打开，同样的问题。单击编辑，每个元素的布局以空心边框的形式显示在空白页面上应有的位置。导出到 Word，一切都按预期显示。

Answer 1

您需要重新构建 HTML。不幸的是，渲染器不支持复杂的 HTML，您不能将标签放在标签内。在这种情况下使用 CSS 结构化 HTML 而不是表格。