2

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

有任何想法吗？

4

8 回答 8

1

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

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

编辑：由于 HTML 本身没有“页面大小”的真正概念，除了它自己的视口（通过 javascript）之外，这将是困难的。

您可以使用 javascript 找出给定 DOM 元素的计算高度：

document.getelementById("anElement").clientheight

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

于 2009-04-20T17:03:39.600 回答
0

Guss：我/我们正在使用winover 库(wnvhtmlconvert.dll) 进行转换。这些位置不是绝对的（页眉和页脚除外），因为如果它们上方的元素展开，它们需要向下洗牌。这一切都需要是动态的，因为元素的内容会随着用户输入而变化。每个元素可能需要拆分或移动，具体取决于“页面”上有多少可用空间。

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

于 2009-04-22T13:00:25.677 回答
0

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

如果您将其呈现为一个大页面，则 PDF 可以在需要的位置打破页面。

于 2009-04-22T13:12:43.260 回答
0

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

基本计划是将 html 内容放在其自己的包含 div 中，并为您可能填充的许多页面重复该 div。然后每个 div 将被设置样式和大小以适合一页，溢出被隐藏（我们可以将每个 div 视为一个“窗口”）。重复的 div 将改变它们的内容，以便内容的不同部分在窗口中。在以下示例中，我将假设 pdf 页面尺寸为 500 像素 x 500 像素（我知道这是不现实的），内容将占用的最大页面数为 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 像素时，内容在两页之间拆分。如果将字体大小增加到 50 像素，则内容将散布以填充所有三个。

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

于 2009-04-24T04:23:45.310 回答
0

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

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

不过，如果您能描述如何将 HTML 转换为 PDF，那将非常有帮助。

于 2009-04-20T18:02:23.377 回答
0

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

于 2009-04-20T16:42:06.500 回答
0

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

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

于 2009-04-28T13:44:34.510 回答
0

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

无论如何，感谢您的帮助。

于 2009-05-19T16:15:23.830 回答