打印预览中<h3>、<hr>、<p>标签多余空白问题求助

生成账单并执行打印操作时，发现打印预览中<h3>标签前、<hr>标签前、<p>标签后出现多余空白，但在页面UI中这些位置并无多余空白。

相关代码如下：

// 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;
    }   
}

可以通过以下步骤消除打印预览中的多余空白：

1. 覆盖浏览器默认标签样式
   浏览器对<h3>、<p>、<hr>有默认边距和内边距，这些是打印时多余空白的主要来源。修改打印媒体查询样式，彻底重置这些标签的间距：

@media print {
    @page {
        size: 10.5cm 15.5cm;
        margin: 0;
        background: red;
    }
    body {
        margin: 0;
        padding: 0;
    }
    .bill-display {
        width: 10.5cm;
        height: 15.5cm;
        overflow: hidden;
    }
    #title, h3{
        margin: 0; /* 同时清除上下边距 */
        padding: 0;
        font-size:30px;
        text-align:center;
    }
    #address{
        font-size:15px;
    }
    /* 修正选择器，针对hr标签而非id为hr的元素 */
    hr{
        margin: 0; /* 清除上下边距 */
        padding: 0;
        border-top: 1px solid #000; /* 保留横线样式的同时避免默认边框空白 */
    }
    /* 清除p标签的下边距 */
    p {
        margin-bottom: 0;
        padding: 0;
    }
}

2. 确保打印窗口加载完整样式
   当前打印窗口仅写入页面内容，未加载原页面的打印样式，导致部分重置规则不生效。修改打印函数，将完整的打印样式写入新窗口的<head>：

function printThermalBill() {
    const billContent = document.getElementById('billDisplay').innerHTML;
    const printWindow = window.open('', '', 'width=600,height=600');
    // 直接写入打印所需的完整样式
    const printStyles = `
        <style>
            @page {
                size: 10.5cm 15.5cm;
                margin: 0;
                background: red;
            }
            body {
                margin: 0;
                padding: 0;
            }
            .bill-display {
                width: 10.5cm;
                height: 15.5cm;
                overflow: hidden;
            }
            #title, h3{
                margin: 0;
                padding: 0;
                font-size:30px;
                text-align:center;
            }
            #address{
                font-size:15px;
            }
            hr{
                margin: 0;
                padding: 0;
                border-top: 1px solid #000;
            }
            p {
                margin-bottom: 0;
                padding: 0;
            }
        </style>
    `;
    printWindow.document.write(`
        <html>
            <head>
                <title>Print Bill</title>
                ${printStyles}
            </head>
            <body>${billContent}</body>
        </html>
    `);
    printWindow.document.close(); // 先关闭文档写入，确保内容加载完成
    // 正确设置打印后关闭窗口的逻辑
    printWindow.onafterprint = function () {
        printWindow.close();
    };
    printWindow.print();
    document.getElementById("billForm").reset();
}

3. 修正打印窗口关闭逻辑
   原代码先调用printWindow.close()再设置onafterprint事件，导致事件无法触发。调整顺序：先关闭文档写入，设置事件监听，再执行打印，让窗口在打印完成后自动关闭。

内容的提问来源于stack exchange，提问作者Purushottam Patil