javascript - 根据内容溢出动态插入分页符

Question

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

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

我想在 A5 页面上很好地打印此内容，并在每个打印页面上重复 header 和 footer。我尝试了两种方法:

将 HTML 结构转换为页面容器并根据总 clientHeight 拆分元素。有点像

<section class="page">
    <header></header>
    <element1></element1>
    <element2></element2>
    <element3></element3>
    <footer></footer>
</section>
<section class="page">
    <header></header>
    <table></table>
    <element4></element4>
    <footer></footer>
</section>

或者，将 CSS 分页符属性添加到 header 并在内容溢出位置动态插入。例如

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

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

CSS @page 不受 Safari 支持，因此没有用。

display: table-header-group 和 table-footer-group 也不起作用。

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

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

Answer 1

不确定这是否符合单独回答的条件，或者应该只是带有一些(希望有用的)提示的评论。

所以...这是网络开发人员长期以来一直在进行的战斗。您可以在 this question 下找到各种答案，这个问题实际上似乎是(某种程度上)的重复。

免责声明:我无法测试 iOS、Safari 或 IE 上提到的技术。它们更多地是对我以前从 SO 帖子和各种文章的评论线程中收集的经验和知识的记忆。

我将尝试提供一些指导和技术，让您稍微接近完全浏览器支持，但在完全支持 @print 之前没有任何 promise :/

1. 固定定位。无论出于何种原因，浏览器都会重复打印页面中的固定元素。困难的部分是调整你的页边距，这样你的页眉和页脚就不会与页面内容重叠，但你应该是黄金。这并不容易，因为即使有 @page 支持，页边距也会压低固定内容。如果没有支持，您可能不得不解决一些 display: table 问题。我在一个简单示例中复制了 fixed 解决方案(我内联了 CSS，因此您可以在本地单独的 HTML 文件中打开它以便于测试):

https://jsfiddle.net/vjvu8uox/

1. @media print 是您可以与 @print 一起查看的东西，因为它自 CSS2 起就受到支持。 .它不提供同样强大的选择器，但允许您针对特定于打印的目的稍微调整您的样式。

   "The ‘print’ and ‘screen’ media types are defined in HTML4. The complete list of media types in HTML4 is: ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’. CSS2 defines the same list, deprecates ‘aural’ and adds ‘embossed’ and ‘speech’. Also, ‘all’ is used to indicate that the style sheet applies to all media types."

2. 表格。许多浏览器将 thead 和 tfoot 元素放置在打印的每个页面的顶部和底部。如果您的 thead 和 tfoot 不 包含多个 tr 元素，则此方法有效。对此的支持于今年 3 月(2018 年)在 Chrome 中登陆。有用的关键字是:

   thead { display: table-header-group; }
   
   tfoot { display: table-footer-group; }
   

我想知道您是否可以将 1. 和 3. 结合起来，首先使用 fixed 定位页眉和页脚，这样它们就会重复，然后可能创建空元素来充当 table-header-group 和 table-footer-group，它们可以为固定元素提供填充？

---

我也会很快解决你的遍历脚本，说你可能想要考虑你的 Vue 应用程序容器(除非你已经将你的 Vue 实例安装到 body 元素，这被认为是一种不好的做法)和所有它嵌套的 child 。从这个意义上说，@MunimMunna 的 jQuery 片段可以更好地为您服务。我将其重写为 vanilla JS 并使用半现代实用方法，我们可以轻松修复 Safari 对该脚本的支持(我现在没有时间，但可以在周一工作时查看它rig/Mac 在 Safari 上测试它)。

祝您打印支持工作顺利!