Question

情景： 我需要从网页创建一个.pdf文件。这个网页构建一个A4大小的页面，其中包含标题，内容和页脚div。内容div有时可以包含很多信息以适应1页，所以如果内容div溢出，我需要创建第二页。每个页面都需要包含标题，内容和页脚div。（div包含需要在每个页面上的页码和签名）

一位同事已经创建了一个.php文件来执行此操作，但是如果有大量数据，则页脚div将在下一页继续（谈论实际A4大小的页面）。他通过计算内容div中的行来完成所有这些操作。它适用于2页，但一切都搞砸了。因为我对.php和html很新，我想深入研究并以正确的方式做事（检测溢出然后制作新页面）。

我已经尝试调整每个页面上允许的行但最后它只是一个黑客，我知道我可以通过某种方式检测到溢出但我无法弄清楚如何使一切正常工作

问题： 计算div中的行是不可靠的，特别是因为每个新的数据（里程，小时，费用）都有一个小的表头，占用页面上的一些空间。虽然我已经尝试调整行号，但最后当文档变大时，标题将不会从页面顶部开始。所以我想让它更加健壮，并确保div的大小不会改变并显示所有信息（意味着没有数据被隐藏，因为div溢出）。

问题当当前内容div溢出时，如何启动新的“页面”？

代码

<?php
    for($pageID = 1; $pageID <= $NumberOfPages; $pageID++){
    $LinesLeft = $linesPerPage;
?>
<div class="header"> Header stuff here </div> // always the same info in this div
<div class="content"> 
 <table border="0" width="100%">      
    <tr>    
      <td valign="top" width="7%">
        <b>Aantal :</b><br>
      </td>

      <td valign="top">
        <b>Materialen :</b><br>           
      </td>       
    </tr>

    <?php 
        for($idx = 0; $idx < $LinesForThisPage; $idx++){
            echo "<tr height=\"22\">     
                  <td style=\"border-bottom: 1px solid black;\">" . $Materialen[$anchorB + $idx]['Aantal'] . "</td>
                  <td style=\"border-bottom: 1px solid black;\">" . $Materialen[$anchorB + $idx]['Omschrijving'] . "</td>
              </tr>";
        }
        $anchor += $idx; // anchor is the current index of where i've left with displaying information.
    ?>

  </table>
 </div>
<div class="footer"> footer stuff </div> // always the same info in this div

修改我大大缩短了我的问题并添加了代码。

Answer 1

要检测div的内容是否溢出，您可以将其height与scrollHeight进行比较。如果它溢出，scrollHeight会更大。

var $el = $('#foo');
if ($el.height() < $el[0].scrollHeight) {
    console.log('this element is overflowing....');
}

检测div溢出并做一些事情

1 个答案: