Question

我有一个系统可以获取动态数据，将其放入HTML中进行布局，然后将其转换为PDF。但是我遇到的问题是，如果一个元素对于剩余的页面空间变得太大或者从底部推出其他东西，我怎么能检测到这个并将元素自己移动到下一页的正确位置？（目前它阻碍了页脚元素。）

有什么想法吗？

Answer 1

您是否考虑过为数据编写两个视图？

这将允许您解决PDF版本的PDF问题，并解决HTML版本上的任何HTML问题。

编辑：由于HTML本身没有“页面大小”的真实概念，超出它自己的视口（通过javascript），这将是艰难的。

您可以使用javascript：

找出给定DOM元素的计算高度

document.getelementById("anElement").clientheight

然后，如果您知道给定页面中的像素数，则可以根据需要添加换行符，如果它太大则将其向下推。

Answer 2

您必须在页面上跟踪所有项目的特定高度，甚至是动态，并确定何时需要插入分页符。

Answer 3

根据您的问题，我假设您对所有内容元素使用静态定位（位置：绝对）？

如果您的内容中断了HTML中的页脚元素，那么您很可能通过让HTML在所有内容下呈现页脚来解决这个问题，就像在HTML中一样。

如果您能描述如何将HTML转换为PDF，那将非常有用。

Answer 4

摊铺：我/我们正在使用winover libraries（wnvhtmlconvert.dll）进行转换。这些位置不是绝对的（除了页眉和页脚），因为如果它们上面的元素扩展，它们需要随机播放。这一切都需要是动态的，因为元素的内容会随用户输入而变化。根据“页面”上有多少可用空间，可能需要拆分或移动每个元素。

扎克：我正在创建HTML，以便将其转换为PDF，仅用于模板布局。 HTML永远不会被看到。

Answer 5

我会取消页脚上的绝对位置，然后让它在内容之后流动。

如果将其渲染为一个大页面，那么PDF可以打破所需的页面。

Answer 6

我将假设您可以控制生成的html并可以在那里进行一些更改。您需要根据经验确定pdf的确切高度和宽度。您还需要确定html页面将填充的最大pdf页数。

基本计划是将html内容放在其自己的包含div中，并重复该div，因为您可能填写的页数很多。然后每个div的样式和大小将适合一页，溢出被隐藏（我们可以将每个div视为“窗口”）。重复div将使其内容移位，以便内容的不同部分位于窗口中。在下面的例子中，我将假设pdf页面尺寸为500px×500px（我知道这是不现实的），内容的最大页面数将占用3，并且您的html由pdf呈现转换器符合标准。

<!DOCTYPE html>
<html>
<head>
  <title>PDF Pagination Example</title>
  <style>
    .header {background:blue; height:25px}
    .footer {background:green; height:25px}
    .window {height:500px; width:500px}
    #window1, #window2, #window3 {height:450px; overflow:hidden}
    #spacer2 {height:0; margin-top:-450px}
    #spacer3 {height:0; margin-top:-900px}
    li {font-size:30px; padding:10px}
  </style>
</head>
<body>

<div class='window'>
<div class='header'>A header</div>
  <div id='window1'>
    <ol>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
    </ol>
  </div>
<div class='footer'>A footer</div>
</div>

<div class='window'>
<div class='header'>A header</div>
  <div id='window2'>
  <div id='spacer2'></div>
    <ol>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
    </ol>
  </div>
<div class='footer'>A footer</div>
</div>

<div class='window'>
<div class='header'>A header</div>
  <div id='window3'>
  <div id='spacer3'></div>
    <ol>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
    </ol>
</div>
<div class='footer'>A footer</div>
</div>

</body>
</html>

字体大小为30像素时，内容会在两页之间分割。如果将字体大小增加到50px，则内容将扩散以填充所有三个。

最后一块拼图是一些javascript。您需要编写一个计算内容高度的片段，并在每个窗口的底部添加填充，这样您就不会像示例中那样获得截断。 javascript还应该设置没有内容的窗口来显示：none。我不确定这是否是你正在寻找的css，所以我不会解决这个问题，但我也确定如果你需要帮助，你可以在SO上找到它:)。

Answer 7

可能有助于考虑一些CSS打印属性，但没有进一步的信息很难说

http://www.w3schools.com/Css/css_ref_print.asp

Answer 8

我发现通过使用 WebBrowser 控件并检查相关元素的 OffsetRectangle.Bottom 属性，我可以判断它是否低于页脚顶部然后我可以判断元素是否已溢出以及多少。

感谢你们的帮助，无论如何都是男人和女孩。

如何判断HTML元素是否已从页面底部消失？

8 个答案: