如何避免window.print()生成两份打印输出？

调用window.print()时，输出会生成两个表格而非一个，尝试过参考相关方案但无法理解和实现。

现有打印CSS代码： #

@page {
    size: 3in 2in;
    margin: 0mm;
}

@media print {
    body * {
        visibility: hidden;
      }
      .printDiv, .printDiv * {
        visibility: visible;
      }
      .printDiv {
        position: absolute;
        left: 0;
        top: 0;
      }
      .printDiv{
        background-color: rgb(5, 3, 3);
        height: 100%;
        width: 100%;
        position: fixed; 
        top: 0;
        left: 0;
        margin: 0;
        line-height: 11px;
        border: 11px solid #000000;
    }
}

待打印的Div代码： #

<div class = "item item-content item-content-title print-form printDiv">
    <table>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td></td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>                        
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>DataDataDataData</td>
        </tr>
        <tr>
            <td>DataDataDataData</td>
            <td>DataDataDataData</td>
        </tr>
    </table>
</div>

问题原因及解决方案： #

问题出在打印样式中对.printDiv重复设置了定位属性——先设为absolute又覆盖为fixed。在打印媒体中，fixed定位的元素会在每一页重复渲染，再加上页面尺寸（3in×2in）较小，内容可能触发分页，最终导致出现两个表格。

修改方案：

1. 删除重复的position: fixed设置，统一使用position: absolute，避免固定定位导致的每页重复显示
2. 移除height: 100%，防止强制撑满页面高度触发不必要的分页
3. 确保表格内容适配打印页面尺寸，避免内容溢出分页

修改后的CSS：

@page {
    size: 3in 2in;
    margin: 0mm;
}

@media print {
    body * {
        visibility: hidden;
    }
    .printDiv, .printDiv * {
        visibility: visible;
    }
    .printDiv {
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgb(5, 3, 3);
        width: 100%;
        margin: 0;
        line-height: 11px;
        border: 11px solid #000000;
    }
}

内容的提问来源于stack exchange，提问作者Eshaan Gupta