'Issue with window print () while printing two copies in single receipt using javascript

Trying to generate a single receipt with break/cut the paper in between and to generate 2 copies, one for customer and another for merchant i.e (to have 2 different slips).

Took reference from https://parzibyte.me/blog/en/2019/10/10/print-receipt-thermal-printer-javascript-css-html/

Tried to apply page break as below but while printing via web application seeing no breaks/cut in the printed receipt.

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="style.css">
        <title>Receipt example</title>
    </head>
    <body>
        <header>
            <h1>HEADER</h1>
        </header>
        <div style="page-break-after:always"></div>
        <section id="content">
            <h1>CONTENT</h1>
        </section>
        <div style="page-break-after:always"></div>
        <footer>
          <h1>FOTTER</h1>
        </footer>
        <button id="btnPrint" class="hidden-print">Print</button>

        <script>
            const $btnPrint = document.querySelector("#btnPrint");
            $btnPrint.addEventListener("click", () => {
                window.print();
            });
        </script>
    </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Issue with window print () while printing two copies in single receipt using javascript

Sources

Related Questions