javascript - 使用 window.print() 强制重复的 printElement 转到页面底部；

Question

我打算进行重复打印。上半部分是员工文案，下半部分是用户文案。一旦打印出来，我们就把它剪成两半。我们如何做到这一点？ window.print(); 可以做到这一点吗？

这是我正在使用的脚本。

    function PrintAppendChangeScheduleButton() {
        printElement(document.getElementById("divID")); //Specify the DIV to be printed.

        function printElement(elem) {
            var forDOMClone = elem.cloneNode(true);
            var $forSECTIONPrint = document.getElementById("forSECTIONPrint"); //For Section Specific Print
            if (!$forSECTIONPrint) {
                var $printSection = document.createElement("div"); //For DIV Specific Print
                $forSECTIONPrint.id = "forSECTIONPrint";
                document.body.appendChild($forSECTIONPrint);
            } else {
                $forSECTIONPrint.innerHTML = "";
                $forSECTIONPrint.appendChild(forDOMClone);
                window.print();
                return true;
            }
        }
    }

我尝试复制 elem.cloneNode(true);，但它没有正确排列。

这就是我现在正在做的事情。

    function PrintAppendChangeScheduleButton() {
        printElement(document.getElementById("divID")); //Specify the DIV to be printed.

        function printElement(elem) {
            var forDOMClone = elem.cloneNode(true);
            var forDOMCloneCUT = elem.cloneNode(true);
            var $forSECTIONPrint = document.getElementById("forSECTIONPrint"); //For Section Specific Print
            if (!$forSECTIONPrint) {
                var $printSection = document.createElement("div"); //For DIV Specific Print
                $forSECTIONPrint.id = "forSECTIONPrint";
                document.body.appendChild($forSECTIONPrint);
            } else {
                $forSECTIONPrint.innerHTML = "";
                $forSECTIONPrint.appendChild(forDOMClone);
                $forSECTIONPrint.appendChild(forDOMCloneCUT);
                window.print();
                return true;
            }
        }
    }

这是当前的打印状态。

这就是我正在寻找的结果。

有没有办法让 javascript 强制 $forSECTIONPrint.appendChild(forDOMCloneCUT); 转到页面的最底部？

Answer 1

我一起破解了一些东西。

首先，我们需要知道一张A4纸的尺寸是210mm x 297mm。我从here得到的.

接下来，我们需要将高度 (297mm) 转换为像素。我们这样做 here并得到 1122.5px。

现在我们需要测量你要打印两次的div的高度，看两次div的高度是否小于一张A4纸的尺寸。如果是，那么我们在两个克隆之间创建一个空的 div，并为其指定克隆之后空白区域的高度。

所以这是你修改后的代码:

* {
margin: 0; 
padding: 0
}

<div id='divID' style="border: 2px black solid; padding-bottom: 200px">
    <h1>CONTENT FROM THIS PAGE IS FROM printElement(document.getElementById('div1'))</h1>
</div>
<div id='forSECTIONPrint'></div>
    <script type="text/javascript">
        window.onload = PrintAppendChangeScheduleButton;
        function PrintAppendChangeScheduleButton() {
            printElement(document.getElementById("divID")); //Specify the DIV to be printed.

            function printElement(elem) {
                var forDOMClone = elem.cloneNode(true);
                var forDOMCloneCUT = elem.cloneNode(true);
                var $forSECTIONPrint = document.getElementById("forSECTIONPrint"); //For Section Specific Print
                if (!$forSECTIONPrint) {
                    var $printSection = document.createElement("div"); //For DIV Specific Print
                    $forSECTIONPrint.id = "forSECTIONPrint";
                    document.body.appendChild($forSECTIONPrint);
                } else {
                    $forSECTIONPrint.innerHTML = "";
                    var elemHeight = elem.offsetHeight;
                    elem.style.display = 'none';
                    var emptySpace = document.createElement('div');
                    $forSECTIONPrint.appendChild(forDOMClone);
                    $forSECTIONPrint.appendChild(emptySpace);
                    //if there's any empty space at the bottom of the page, then set the height of the
                    //empty div in between the clones with that space height
                    if (1122.5 - (elemHeight * 2) > 0){
                        setTimeout(function(){
                            emptySpace.style.height = 1122.5 - (elemHeight * 2) + 'px';
                            window.print();
                        },100);
                    }
                    //if there's no empty space, just print right away
                    else {
                        window.print();
                    }
                    $forSECTIONPrint.appendChild(forDOMCloneCUT);
                    return true;
                }
            }
        }
    </script>