Javascript 基于内容溢出动态插入分页符

我有一个通过许多Vue组件生成的大型网页。呈现的HTML结构与此类似：

<header></header>
<element1></element1>
<element2></element2>
<element3></element3>
<table></table>
<element4></element4>
<footer></footer>

或者，将CSS分页符属性添加到

标题

，并在内容溢出位置动态插入。比如说

<header></header>
<element1></element1>
<element2></element2>
<element3></element3>
<footer></footer>
<header style="page-break-before: always"></header>
<table></table>
<element4></element4>
<footer></footer>

查找溢出点的DOM遍历如下所示

var availHeight = 20;    // Height of A5 page - tolerance
var body = document.querySelector('body');
var initialWidth = body.style.width;
body.style.width = '14.85cm';

if (body.clientHeight > availHeight) {    // if content exceeds page height
    var scrollHeight = 0;
    for (var i = 0; i < body.children.length; i++) {
        var child = body.children[i];
        scrollHeight += child.clientHeight;

        if (scrollHeight > availHeight) {    // if children traversed till now make up to the height of page
            if (child.clientHeight < availHeight) {
                child.insertAdjacentHTML('beforebegin', '"page break html here..."');
                scrollHeight = 0;
            }
        }
    }
}
body.style.width = initialWidth;

var availHeight=20；//A5页的高度-公差
var body=document.querySelector（'body'）；
var initialWidth=body.style.width；
body.style.width='14.85cm'；
if（body.clientHeight>availHeight）{//如果内容超过页面高度
高度=0；
for（var i=0；iavailHeight）{//if到目前为止遍历的子级达到页面的高度
if（child.clientHeight

然而，这两种方法在打印时都会给出不准确的结果

Safari不支持CSS

@page

，因此没有任何用处

显示：表头组

和

表尾组

也不工作

是否有不同的跨浏览器解决方案来实现打印精美的页面，重复页眉和页脚，不剪切/重叠任何内容，或者DOM遍历代码是否可以改进为更通用和更稳定？这里的事情可以纠正或简化吗？

提前谢谢。对于这个问题，我还没有找到令人满意的解决方法或解决方案。

我做了一个类似的任务，但它只是为了在多页设计中格式化要查看的页面。使用类似的方法，我们可以通过添加页眉和页脚来实现它。让我知道它是否对你有效，如果你需要任何帮助

$（函数（）{
函数printFormat（$contentElement）{
//准备临时页面
var$printWrapper=$（'.printWrapper'）.empty（）；
var$tempA5=$（''）.appendTo（$printWrapper）；
$contentElement.clone（）.children（）.appendTo（$tempA5）；
变量$header=$tempA5.find（'.header'），$footer=$tempA5.find（'.footer'）；
var pageHeight=$tempA5.height（），headerHeight=$header.height（），footerHeight=$footer.height（）；
$header.remove（）；$footer.remove（）；
//生成页面
var$pageA5=$（''）.appendTo（$printWrapper）.append（$header.clone（））；
var$pagefooter=$footer.clone（）.appendTo（$pageA5），$bottomLine=$（''）.appendTo（$pageA5）；
var$elements=$tempA5.children（）；
变量i=-1，totalChildren=$elements.length；
while（++ipageHeight）{
$pageA5=$（''）.appendTo（$printWrapper）.append（$header.clone（））；
$pagefooter=$footer.clone（）.appendTo（$pageA5）；
$bottomLine=$（''）.appendTo（$pageA5）；
$element\u copy.insertBefore（$pagefooter）；
}
}
$tempA5.remove（）；
$printWrapper.find（'.footer'）。每个（函数（i，el）{
$（el.css（“marginTop”，pageHeight el.nextSibling.offsetTop）；
});
$contentElement.hide（）；
}
打印格式（$（“#目录”）；
});
。第5页{
位置：相对位置；
宽度：720px；
高度：1068px；
保证金：自动；
}
.标题{
字体大小：20px；
填充：20px；
背景：橙色；
}
.页脚{
字体大小：20px；
填充：20px；
背景：蓝色；
}
@媒体印刷品{
身体，
页面{
保证金：0；
盒影：0；
}
}

标题：）
博客图片帖子

与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一段古典拉丁文学，距今已有2000多年的历史。弗吉尼亚州汉普顿悉尼学院的拉丁语教授理查德·麦克林托克（Richard McClintock）从《洛伦·伊普斯姆》（Lorem Ipsum）一段中查找了一个更为晦涩的拉丁语单词，即Concertetur，并查阅了古典文学中对该词的引用，发现了该词无可置疑的来源。
Item
Item
Item
西塞罗于公元前45年所著。这本书是一本关于伦理理论的论文，在文艺复兴时期非常流行。
第一项
第二项
第三项
第四项“，Arial，Helvetica，无衬线；字体大小：13px；边缘底部：20px；“>Lorem Ipsum的第一行“Lorem Ipsum dolor sit amet…”来自第1.10.32节中的一行。自1500年代以来使用的Lorem Ipsum的标准块如下所示，供感兴趣的人使用。“de Finibus Bonorum et Malorum”的第1.10.32节和第1.10.33节“西塞罗的作品也以其准确的原始形式复制，并附有H.Rackham 1914年翻译的英文版本。
NamePositionOfficeArt DateSalaryNamePositionOfficeArt dateSalaryAiri SatouAccountantTokyo332008/11/28$162700 Angelica RamosChief伦敦472009/10/09$1200000

var availHeight = 20;    // Height of A5 page - tolerance
var body = document.querySelector('body');
var initialWidth = body.style.width;
body.style.width = '14.85cm';

if (body.clientHeight > availHeight) {    // if content exceeds page height
    var scrollHeight = 0;
    for (var i = 0; i < body.children.length; i++) {
        var child = body.children[i];
        scrollHeight += child.clientHeight;

        if (scrollHeight > availHeight) {    // if children traversed till now make up to the height of page
            if (child.clientHeight < availHeight) {
                child.insertAdjacentHTML('beforebegin', '"page break html here..."');
                scrollHeight = 0;
            }
        }
    }
}
body.style.width = initialWidth;

thead { display: table-header-group; }

tfoot { display: table-footer-group; }