代码之家  ›  专栏  ›  技术社区  ›  Mladen Prajdic

在页面上仅打印完整div

  •  1
  • Mladen Prajdic  · 技术社区  · 17 年前

    • 第5部分的前半部分打印在第1页,另一半打印在第2页。
    • 这对所有20个div都是重复的。
    • 第一页和第二页开始 第五组等等。

    因此,每个打印页将只包含完整的div。

    编辑:

    3 回复  |  直到 17 年前
        1
  •  2
  •   Gumbo    17 年前

    试试 page-break-inside property :

    div {
        page-break-inside: avoid;
    }
    
        2
  •  2
  •   geowa4    17 年前

    不能完全按照您希望的方式使用CSS。要做到这一点,您需要像纸张大小这样的信息。 page-break-inside 这是你能做的最好的,但不是保证。

        3
  •  1
  •   Matt Bridges    17 年前

    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";
            }
        }
    }