window.print分页打印

最新推荐文章于 2024-07-09 11:25:19 发布

原创最新推荐文章于 2024-07-09 11:25:19 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种用于处理长表格数据分页的技术，通过遍历表格元素并计算每个元素的顶部位置与滚动条之间的距离，从而实现当页面高度超过预设值时自动分页。同时展示了如何在HTML中插入分页标志，以改善用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


function init() {
    var tt = document.getElementById("tt");
    var childNodes = tt.childNodes[0].childNodes;
    var level = 0;
    for (var i = 0; i < childNodes.length; i++) {
        var topHeight = childNodes[i].offsetTop - childNodes[i].scrollTop;
        var pageHeight = topHeight - level;
        //暂定高度为850px时进行分页,高度大于850px，则该tr被分到下一页
        //appendBefore
        if (pageHeight > 850) {
            var pageTr = document.createElement("tr");
            pageTr.style.pageBreakAfter = "always";
            var tmpTr = document.createElement("tr");
            childNodes[i].parentNode.insertBefore(tmpTr, childNodes[i]);
            childNodes[i].parentNode.insertBefore(pageTr, childNodes[i]);
            level = childNodes[i - 1].offsetTop - childNodes[i - 1].scrollTop;
            console.log("当前level为：" + topHeight + ", 当前tr索引为：" + (i + 1));
        }
    }
}

printTest.zip (832 Bytes)
下载次数: 37