.NET Razor页面调用window.print()打印样式错乱问题咨询

问题产生原因 #

• 你使用的Bootstrap col-md-* 响应式栅格类生效断点为屏幕宽度≥768px，而浏览器打印时默认视口宽度普遍小于该阈值，导致栅格规则失效，所有列自动堆叠换行，就会出现挤压、无故重排的问题。
• 没有针对打印场景做专属样式适配，打印按钮、返回列表链接这类不需要出现在打印结果里的元素也会被纳入排版，挤占有效空间。
• 浏览器默认打印规则会关闭背景、阴影渲染，同时自带的页面边距不符合你的报表布局要求。

具体修复方案 #

步骤1：替换栅格类 #

把页面中所有 col-md-* 类替换为 col-* 类，col-* 是全宽度下都生效的栅格类，不会因为打印视口变小失效，比如原 col-md-1 改成 col-1、col-md-11 改成 col-11，所有带md标识的栅格类全部对应替换即可。

步骤2：隐藏打印时不需要的元素 #

给打印按钮容器、底部返回链接加Bootstrap自带的d-print-none类，打印时会自动隐藏这部分内容：

<!-- 打印按钮部分修改后 -->
<div class="col-1 d-print-none">
    <input class="text-left" type="button" onclick="javascript:window.print()" value="Print" runat="server" />
</div>

<!-- 底部返回链接部分修改后 -->
<p style="margin-top: 20px" class="d-print-none">    @Html.ActionLink("Back to List", "Index")</p>

步骤3：新增打印专属样式 #

在DetailsStyle.css末尾添加以下打印媒体查询规则：

@media print {
    /* 取消屏幕端的顶部边距，适配打印布局 */
    .topLabel {
        margin-top: 0 !important;
    }
    /* 强制浏览器打印阴影、边框等效果 */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    /* 固定打印参数，可根据实际打印效果调整数值 */
    @page {
        margin: 1.5cm; /* 打印页面边距 */
        size: A4 portrait; /* 强制A4纸纵向打印，需要横向则改为landscape */
    }
}

补充说明 #

后续如果加入表格内容，给表格添加w-100类保证宽度占满，同时可以在打印样式里添加table {page-break-inside: avoid;}规则避免表格被强制分页截断。

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