Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Bossino's avatar

How to print a specific div only?

Hello. I've been trying to print a receipt. I want to print only the specific div and the size would be the same as the specific div as I print it in thermal printer.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        @media print
        {
            .button
            {
                display: none;
            }
        }

        @media print
        {
            @page {
                margin-top: 0;
                margin-bottom: 0;
            }
            body {
                padding-top: 72px;
                padding-bottom: 72px;
            }
        }
    </style>
</head>

<body style="background: #f9f9f9">

    <div class="container">
        <div class="row">
            <div class="col-xs-12">
        
        <-- THIS DIV ONLY -->
                <div id="print" class="print" style="border: 1px solid #a1a1a1; width: 88mm; background: white; padding: 10px; margin: 0 auto; text-align: center;">

                    <div class="invoice-title" align="center">
                        <span id="num2" style="font-size:85px; font-weight:bold;line-height:1.45">
                            {{ $call->letter }}-{{ $call->number }}
                        </span>
                    </div>

                    <div class="invoice-title" align="center">
                        <b>{{ $call->trans_name ?? 'no transaction' }}</b>
                    </div>
                    

                    <div class="invoice-title" align="center">
                        <b>Php {{ $call->amount }}</b>
                    </div>

                    <div class="invoice-title" align="center">
                        <b>Issued on {{$call->created_at}}</b>
                    </div>

                    <br>
                    
                </div>
            </div>
        </div>
    </div>

    


    <script type="text/javascript">
        myFunction();

        function myFunction(){
            window.print();
        }

        window.onafterprint = function(e){
            closePrintView();
        }

        function closePrintView(){
            window.location.href = '{{ route('office.show', ['name' => $call->office_name]) }}'     
        }
    </script>
</body>
</html>

In my specific div, it specifies it size and only that div will be printed only. I've been struggling on that for a long time and trying everything I search.

0 likes
10 replies
Sinnbeck's avatar

What unexpected thing happens then? Blank page? Wrong size of div?

Bossino's avatar

screenshot

From the print preview. If you notice, the default printer is my POS printer that's why the paper in the preview is vertical. I just want the square one will only be print.

Sinnbeck's avatar

I assume you have other css. The problem might be that there is some css to container or body that makes it very tall. If you don't have alot of css you can try posting it

Bossino's avatar

Okay sir I may struggle adjusting on its css sir.

Sinnbeck's avatar

How are you loading your normal css? Using ?

Bossino's avatar

I just load in my blade file in my style section

Sinnbeck's avatar

Ok. If you used and css files for your normal css, you could add media="screen" to tell print to ignore it :)

For instance the first css file here only loads in browsers, and the second only loads in print.

  <link rel="stylesheet" type="text/css" href="app.css" media="screen">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
Bossino's avatar

So my CSS code in my blade should transfer in print.css based on what I understand?

In print.css

@media print
        {
            .button
            {
                display: none;
            }
        }

        @media print
        {
            @page {
                margin-top: 0;
                margin-bottom: 0;
            }
            body {
                padding-top: 72px;
                padding-bottom: 72px;
            }
        }
Sinnbeck's avatar

I am talking about it NON print css.. Your print will use that and my guess is that you have some styling in there that breaks your print. You can also try posting the css for you body

Please or to participate in this conversation.