BossPogs
5 months ago

How to print a specific div only?

Posted 5 months ago by BossPogs

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.

Please sign in or create an account to participate in this conversation.