ASP.NET Core中如何打印固定宽高的div元素且保持尺寸不变？

以下是几个关键调整点，确保打印时div尺寸完全匹配穿孔纸：

1. 新增打印专属样式 #

浏览器的打印渲染逻辑和屏幕显示不同，必须用@media print单独定义打印样式，优先使用物理单位（cm/mm）替代rem，避免受浏览器字体设置影响：

@media print {
    /* 重置页面默认边距，避免打印区域偏移 */
    body, html {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* 强制表格固定布局，防止td自动拉伸 */
    table {
        table-layout: fixed !important;
        border-collapse: collapse !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 给td设置固定宽度，和卡片尺寸对齐，移除默认内边距 */
    td {
        width: 21.9456cm !important; /* 把原rem值转换为物理单位，更精确 */
        padding: 0 !important;
        margin: 0 !important;
        vertical-align: top;
    }

    /* 打印时强制卡片使用物理尺寸，移除不必要样式 */
    .InputCard {
        height: 15.8292cm !important;
        width: 21.9456cm !important;
        margin: 0 0 0.3708cm 0 !important;
        max-height: 15.8292cm !important;
        max-width: 21.9456cm !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
        page-break-inside: avoid; /* 防止卡片被分页截断 */
    }

    /* 确保打印按钮等非打印元素彻底隐藏 */
    .d-print-none {
        display: none !important;
    }
}

2. 调整表格结构，消除布局干扰 #

修改Preview.cshtml中的表格部分，确保td不会因为内容或默认样式拉伸：

<table class="table m-b-30 table-borderless" style="table-layout: fixed; width: 100%;">
    <tbody>
        @for(int i = 0; i < Model.Count(); i = i + 2)
        {
            <tr>
                <td style="width: 21.9456cm; padding: 0; margin: 0;">
                    <div class="card InputCard">
                        <!-- 卡片内容 -->
                    </div>                                        
                </td>
                <td style="width: 21.9456cm; padding: 0; margin: 0;">
                    @if (i+1 < Model.Count())
                    {
                        <div class="card InputCard">
                            <!-- 卡片内容 -->
                        </div>
                    }
                </td>
            </tr>
        }
    </tbody>
</table>

3. 打印前的浏览器设置检查 #

• 打印时选择实际尺寸（不要选“适应页面”或“缩放”）
• 取消勾选“页眉和页脚”，避免额外的页面元素占用空间

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