Removing print button from your online receipt using @media print
Published: 2022-05-28 13:37:06

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.