在HTML中創建分頁符

Question

我正在使用html創建一個簡歷，一些元素有多行。 例如，教育可以擁有學院，參加的日期和分開的學位。 但是，學院，日期和學位都是一個記錄的一部分。

我正在嘗試使用html打印時創建分頁符。 如果下一個元素中的行數大於8.5 x 11頁上剩余的行數，我只希望插入分頁符。 使用前面的示例，我希望教育記錄中的所有行都在一個頁面上。 數據正在傳入，因此分頁符隨着從簡歷到恢復而變化。

我找到了創建分頁@media print {footer {page-break-after: always;}}代碼： @media print {footer {page-break-after: always;}} 。

我還找到了可以獲得div的行高的代碼：

var element = document.getElementById('content'); document.defaultView.getComputedStyle(element,null).getPropertyValue("lineHeight");

我需要計算8x11頁面上剩余的行數，並將該高度與下一個元素的高度進行比較。 而不是使用分頁符，另一種選擇是添加足夠的空行來將元素向下移動到足以使它全部在一個頁面上，但我仍然需要能夠計算剩余的行數。 我將不勝感激任何建議。 謝謝。

編輯：這是我的代碼到目前為止：

var totalHeight = 1056;
var divHeight = document.getElementById('element').offsetHeight;
totalHeight = totalHeight - divHeight;
if(totalHeight < 0)
{
    document.write("<style>");
    document.write("@media print {#element {page-break-after: always;}}");
    document.write("</style>");
}

但是，當我打印出總高度時，它只返回一個略超過200的數字。相反，數字應該超過1056.farkationHeight方法只返回文本本身的大小而不是它周圍的間距或是否有另一個問題可能會造成巨大的差異？ 謝謝。

Answer 1

我認為這里最棘手的部分是處理瀏覽器打印時頁面上的任何邊距。 不確定你是否可以控制它。 但是，如果可以，請嘗試使用in作為您的大小單元而不是px或em 。 然后，如果你計算出你已經超過了11 11in ，那么添加你的分頁符。

這是一個偽代碼算法：

var totalHeight = page margin

foreach div:
    totalHeight += calculated height in inches

    if totalHeight > 11in:
        insert page break

rinse and repeat for further pages