MVC打印分页失效内容被截断，求可行解决方案

看起来你踩了CSS分页的一个常见坑——Bootstrap的row（flex布局）会阻止page-break属性生效，而且你需要同时兼顾屏幕自适应和打印时的固定布局。我来给你一步步解决：

1. 重构HTML结构：给每4个卡片分组 #

首先，我们需要把每4个卡片包裹在一个独立的块级容器里，这样分页规则能作用在容器上，而不是flex子元素。利用循环的索引来分组：

<div class='row small'>
    @{ int itemCount = 0; }
    @foreach (var item in Model.BuyerList.ImageList)
    {
        // 每4个卡片开启一个分页组
        if (itemCount % 4 == 0)
        {
            <div class="print-page-group">
        }

        <div class="card bg-light mb-3 mr-1 card-text-fixed-width">
            <div class="img-control">
                @if (!string.IsNullOrWhiteSpace(item.ImageUrl))
                {
                    <img src="@item.ImageUrl" style="height:150px;" class="card-img-top" alt="Card image" />
                }
                else
                {
                    <img src="~/AdTrack Images/NoProductImage.png" style="height:150px;" class="card-img-top" alt="Card image" />
                }
                <div class="edit d-print-none">
                    <a data-toggle="modal" data-id='{"id": "@item.Items.Number","ItemId":"@item.Items.ItemId", "AdId":"@item.Header.Id"}' class="open-AddBookDialog btn btn-primary" href="#"><i class="fa fa-pencil fa-lg"></i></a>
                </div>
                <div class="delete d-print-none">
                    <a data-toggle="modal" data-id='{"id": "@item.Items.Number","ItemId":"@item.Items.Id", "AdId":"@item.Id"}' class="open-delete btn btn-primary" href="#">
                        <i class="fa fa-trash" style="font-size:15px;color:red" id="delete" name="delete"></i>
                    </a>
                </div>
                <div class="edit d-print-none">
                    <a data-toggle="modal" data-id='{"id": "@item.Items.Number","ItemId":"@item.Items.ItemId", "AdId":"@item.Header.Id"}' class="open-AddBookDialog btn btn-primary" href="#"><i class="fa fa-info-circle fa-lg"></i></a>
                </div>
            </div>
            <div class="card-header">
                <div class="font-weight-bold">Page @Html.DisplayFor(modelItem => item.Number)- @Html.DisplayFor(modelItem => item.Business)</div>
                <div class="row mb-2 font-weight-bold">
                    <div class="col-md-6">Cut: @Html.DisplayFor(modelItem => item.Items.Number)</div>
                    <div class="col-md-6 text-right">9-Box: @Html.DisplayFor(modelItem => item.Items.BoxNumber)</div>
                </div>
                <div class="row mb-2 font-weight-bold">
                    <div class="col-md-4">Group @Html.DisplayFor(modelItem => item.Department.Test)</div>
                    <div class="col-md-4">Buyer @Html.DisplayFor(modelItem => item.Department.Test)</div>
                    <div class="col-md-4">Dept @Html.DisplayFor(modelItem => item.Items.Department)</div>
                </div>
            </div>
        </div>

        itemCount++;

        // 关闭分组：每4个或者最后一组时闭合
        if (itemCount % 4 == 0 || itemCount == Model.BuyerList.ImageList.Count)
        {
            </div>
        }
    }
</div>

2. 添加打印专属CSS，解决布局和分页 #

用媒体查询区分屏幕和打印场景，强制打印时使用块级布局，确保分页生效：

/* 屏幕显示：自适应每行4张及以上 */
@media screen {
    .card-text-fixed-width {
        flex: 0 0 23%; /* 留2%的间距，刚好每行4张 */
        max-width: 23%;
    }
}

/* 打印时的核心样式 */
@media print {
    /* 把Bootstrap的row从flex改成block，避免阻止分页 */
    .row {
        display: block !important;
        width: 100% !important;
        page-break-inside: avoid !important;
    }

    /* 每张卡片固定24%宽度，加0.5%边距，确保每行刚好4张 */
    .card-text-fixed-width {
        display: inline-block !important;
        width: 24% !important;
        margin: 0.5% !important;
        page-break-inside: avoid !important; /* 绝对禁止卡片被拆分到两页 */
    }

    /* 每个分组后强制分页，最后一组除外 */
    .print-page-group:not(:last-child) {
        page-break-after: always !important;
    }

    /* 隐藏打印不需要的编辑/删除按钮 */
    .d-print-none {
        display: none !important;
    }

    /* 重置页面边距，防止内容被截断 */
    body, html {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
}

3. 关键问题解释 #

• 为什么原来的page-break无效？：flex容器的子元素会忽略page-break属性，所以我们必须把分页规则应用到块级的分组容器上，同时在打印时禁用row的flex布局。
• 防止内容截断：page-break-inside: avoid能确保单个卡片不会被拆分到两页，这解决了你提到的内容截断问题。
• 屏幕与打印布局分离：通过媒体查询，屏幕上用flex自适应，打印时用固定宽度的inline-block保证每行4张。

可选优化：避免最后一组空白分页 #

如果你不想最后一组（不足4张）后面出现空白页，CSS里的:not(:last-child)选择器已经帮你处理了，只给非最后一个分组加分页。

现在你可以在浏览器打印预览里测试，调整宽度和边距到适合你的纸张尺寸就好啦！

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