仅在页面上打印完整的 DIV答案

【问题标题】：Printing only full DIVs on a page仅在页面上打印完整的 DIV
【发布时间】：2009-07-15 17:12:11
【问题描述】：

我有一个页面，上面有大约 20 个 div。我想做的是像这样打印页面：

4 个 div 完全显示在一个打印页面上。
第 5 个 div 的前半部分打印在第 1 页，另一半打印在第 2 页。
此重复所有 20 个 div。
我希望页面上有前 4 个 div 第一页和第二页开始 div 5 等等。

所以每个打印的页面将只包含完整的 div。也不知道 div 的高度。所以每页可以有 1 或 7 个完整的 div。

编辑：我已经尝试了所有 page-break-before 和 page-break-inside 选项

【问题讨论】：

标签： html css printing

【解决方案1】：

不能完全按照您想要的方式使用 CSS。为此，您需要诸如纸张大小之类的信息。 page-break-inside 是你能做的最好的，但不是保证。

【讨论】：

【解决方案2】：

试试page-break-inside property：

div {
    page-break-inside: avoid;
}

【讨论】：

很遗憾没有这样做。
page-break-inside 尚未得到广泛支持（请参阅reference.sitepoint.com/css/page-break-inside）。

【解决方案3】：

你也许可以用 javascript 来破解一些东西。您可以测量每个 div 的 offsetHeight 和 offsetTop，并将其与每页的预期高度（以像素为单位）进行比较。您必须尝试不同的页面高度才能使其准确，但这样的方法可能会起作用：

function paginateDivs() {

    var pageHeight = 800; // Experiment with different values here, this
                          // is 800 pixels.
    var lastPage = 0;

    var divs = document.getElementsByTagName("div");

    for (var i = 0; i < divs.length; i++) {
        var divBottom = divs[i].offsetTop + divs[i].offsetHeight;
        if (divBottom - lastPage > pageHeight) {
            lastPage = divs[i].offsetTop;
            divs[i].style.pageBreakBefore = "always";
        }
    }
}

【讨论】：

酷而有用的解决方案，但我不能为此使用javascript。