如何判断 HTML 元素是否已脱离页面底部？

发布于 2024-07-17 14:08:46 字数 153 浏览 8 评论 0原文

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

有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼眸印温柔 2024-07-24 14:08:47

也许有助于考虑一些 CSS 打印属性，但如果没有进一步的信息，很难说

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

回复收藏 0 原文

小猫一只 2024-07-24 14:08:47

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

不管怎样，谢谢你们的帮助，伙计们和姑娘们。

回复收藏 0 原文

ぇ气 2024-07-24 14:08:46

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

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

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

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

document.getelementById("anElement").clientheight

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

Have you considered just writing two views for the data instead?

This will allow you to address and of PDF issues on the PDF version and address any html issues on the HTML version.

Edit: Since HTML itself has no real concept of "page size", beyond it's own viewport (through javascript), this will be tough.

You can find out the calculated height of a given DOM element using javascript:

document.getelementById("anElement").clientheight

Then if you know the number of pixels in a given page, you can add line breaks as needed to push it down if it will be too big.

回复收藏 0 原文

你好，陌生人 2024-07-24 14:08:46

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

回复收藏 0 原文

与他有关 2024-07-24 14:08:46

从你的问题来看，我假设你对所有内容元素使用静态定位（位置：绝对）？

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

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

回复收藏 0 原文

蓝天白云 2024-07-24 14:08:46

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

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

回复收藏 0 原文

下雨或天晴 2024-07-24 14:08:46

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

如果将其渲染为一大页，则 PDF 可能会在需要的地方破坏页面。

回复收藏 0 原文

一紙繁鸢 2024-07-24 14:08:46

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

基本计划是将 html 内容放入其自己的包含 div 中，并在您可能填充的任意页面中重复该 div。然后，每个 div 的样式和大小将适合一页，并且隐藏溢出（我们可以将每个 div 视为一个“窗口”）。重复 div 的内容将被移动，以便内容的不同部分位于窗口中。在下面的示例中，我将假设 pdf 页面尺寸为 500px x 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 像素时，内容分为两页。如果将字体大小增加到 50 像素，内容将扩展至填满所有三个。

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

I'm going to assume you have control over the generated html and can make some changes there. You will need to empirically determine the exact height and width of the pdf. You will also need to determine the maximum number of pdf pages an html page will fill.

The basic plan is to put the html content in its own containing div and repeat that div for however many pages you might possibly fill. Each div will then be styled and sized to fit on one page, with the overflow being hidden (we can think of each div as a "window"). The repeat divs will have their content shifted so that a different part of the content is in the window. In the following example, I'm going to assume a pdf page dimensions of 500px by 500px (I know this is unrealistic), that the maximum number of pages content will take up is 3, and that your html is being rendered by the pdf converter in a standards-compliant fashion.

<!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>

At a font size of 30px, the content splits between two pages. If you increase the font size to 50px, the content will spread to fill all three.

The last piece of the puzzle is a bit of javascript. You will need to write a snippet that calculates the height of the content and adds padding to the bottom of each window so you don't get cutoff like in the example. The javascript should also set windows with no content in them to display:none. I'm not sure if this is even the css you are looking for, so I won't work out the javascript, but I am also certain that if you need help with that you can find it here on SO :).

回复收藏 0 原文

~没有更多了~