Removing print button from your online receipt using @media print

KingEricx — Sat, 28 May 2022 13:37:06 +0000

In this article, you will learn how to remove a "print button" from an online document or receipt. But first, you need to learn how to use the JavaScript(Js) print command.

Designing the document or receipt

First, we have to write the HTML to print the document or receipt, I will be using a table to show a receipt-like content in a nicely formatted way.

Here is the code snippet for you:

<!doctype html>
<html lang="en">
  <head>
    <title>Receipt Demo</title>
    <style type="text/css">
        * {
            font-size: 12px;
            font-family: 'Times New Roman';
        }

        td,th, tr,table {
            border-top: 1px solid black;
            border-collapse: collapse;
        }

        td.description,th.description {
            width: 75px;
            max-width: 75px;
        }

        td.quantity,th.quantity,td.price,th.price {
            width: 40px;
            max-width: 40px;
            word-break: break-all;
        }

        .centered {
            text-align: center;
            align-content: center;
        }

        .ticket {
            width: 155px;
            max-width: 155px;
        }

        @media print {
            .hidden-print,.hidden-print * {
                display: none !important;
            }
        }
    </style>
  </head>
  <body>
  <div class="ticket">    
            <p class="centered">RECEIPT EXAMPLE
                <br>Address line 1
                <br>Address line 2</p>
            <table>
                <thead>
                    <tr>
                        <th class="quantity">Q.</th>
                        <th class="description">Description</th>
                        <th class="price">$$</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="quantity">1.00</td>
                        <td class="description">WHITE CREATIVITY HANDBOOK</td>
                        <td class="price">$25.00</td>
                    </tr>
                    <tr>
                        <td class="quantity">2.00</td>
                        <td class="description">SWEETS</td>
                        <td class="price">$5.00</td>
                    </tr>
                    <tr>
                        <td class="quantity">1.00</td>
                        <td class="description">FANS</td>
                        <td class="price">$10.00</td>
                    </tr>
                    <tr>
                        <td class="quantity"></td>
                        <td class="description">TOTAL</td>
                        <td class="price">$40.00</td>
                    </tr>
                </tbody>
            </table>
            <p class="centered">Thanks for your purchase!
                <br>Legends Only</p>
        </div>
        <button id="btnPrint" class="hidden-print" onclick="window.print()">Print</button>      
  </body>
</html>

Note: We have used the "window.print()" command on-click of the print button, to trigger the printing dialog box. This is a static example, you can always use a framework (client side or server side) to render the content in a dynamic way.

Hiding the button

In CSS media query allows you to determine a different style for your HTML element under different scenarios, for example, @media screen helps you write CSS for different screen sizes, to hide our print button, we will be using @media print, which allows us to set a style for out HTML element while we are printing.
We have set the CSS display property of our print button to “none” within the @media print query which is used to hide the button when we print the document/receipt.

DEV Community: KingEricx

Removing print button from your online receipt using @media print

Designing the document or receipt

Hiding the button