CODEWITHSUNDEEP
javascriptcss
Purushottam Patil
Purushottam Patil

Reputation: 9

The print preview is adding some extra space for <hr>, <p>, <h3> tag in the print preview

I am trying to generate a bill and trying to print it using print button. This is print preview and extra white space is added before <h3>, before <hr> and after <p> as shown in the image.
In UI, there is no white space added before <h3>, before <hr> and after <p> as shown in the image

// Function to handle actual printing (this will only be called if validation passes)
    function printThermalBill() {
        // Existing code to print the bill
        const billContent = document.getElementById('billDisplay').innerHTML;
        const printWindow = window.open('', '', 'width=600,height=600');
        printWindow.document.write(`
            <head><title>Print Bill</title></head>
            <body>${billContent}</body>
            </html>
        `);
        printWindow.print();
        printWindow.document.close();
         printWindow.close();
        
          // Close the print window after printing
        printWindow.onafterprint = function () {
            printWindow.close();
        };
    document.getElementById("billForm").reset();
    }
    
        @media print {
        @page {
            size: 10.5cm 15.5cm;
            margin: 0; /* Remove margins */
            background: red;
        }
        body {
            margin: 0;
            padding: 0;
        }
        .bill-display {
            width: 10.5cm;
            height: 15.5cm;
            overflow: hidden;
        }
        #title, h3{
            padding-bottom:0px;
            padding-bottom:0px;
            margin-bottom:0px;
            margin-bottom:0px;
            font-size:30px;
            text-align:center;
        }
        #address{
            font-size:15px;
        }
        #hr{
            padding-bottom:0px;
            padding-bottom:0px;
            margin-bottom:0px;
            margin-bottom:0px;
            font-size:30px;
            text-align:center;
        }   
    }

Please help me out to get rid of the extra white spaces added before <h3>, before <hr> and after <p> as shown in the image in the print preview.

Upvotes: 0

Views: 87

Answers (0)

Related Questions