Force duplicate printElement to go to the bottom part of the page using window.print();

Question

I am planning to do a duplicated printing. The top-half is for the staff's copy, and the lower-half part is for the user's copy. We will just cut the paper in half once it's printed. How do we do this? Can the window.print(); do this?

This is the script that I am using.

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

I tried duplicating elem.cloneNode(true);, but it does not arrange it properly.

This is what I'm working on right now.

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

This is the current printing status.

This is the result that I am looking for.

Is there a way for javascript to force $forSECTIONPrint.appendChild(forDOMCloneCUT); to go to the lowest part of the page?

score 1 · Accepted Answer · answered Dec 10 '19 at 12:34

I have hacked something together.

First, we need to know that the size of an A4 sheet is 210mm x 297mm. I got that from here.

Next, we need to convert the height (297mm) to pixels. We do that here and get 1122.5px.

Now we need to measure the height of the div you want to print twice, and see if twice the height of the div is less than the size of an A4 sheet. If yes, then we create an empty div in between the 2 clones and give it the height of whatever empty space is there after the clones.

So here's your modified code:

* {
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>

Ma'am, you just made my day. Thank you very much! this does it! I now just need to understand the changes you've made and do some tweaks. — pjustindaryll, Dec 11 '19 at 00:57

Force duplicate printElement to go to the bottom part of the page using window.print();

1 Answers1