MVC Print Разрыв страницы не работает, содержимое обрезано

Question

Я попробовал приведенный ниже код, чтобы разбить страницу во время печати, однако она не работает, я узнал, что разрыв страницы не будет работать во вложенных тегах div, я не уверен, как этого добиться, в основном я пытаюсь отобразитьизображений, поэтому в строке их будет 4 или больше, в зависимости от размера экрана, однако на момент печати должно быть напечатано 4 изображения в строке, а следующие 4 изображения должны быть напечатаны на следующей странице, как если бы сейчаспечать, изображения и содержимое обрезаются, пожалуйста, помогите

     <div class='row small'>
        @foreach (var item in Model.BuyerList.ImageList)
        {

            <div class="card bg-light mb-3 mr-1 card-text-fixed-width" style='page-break-after:always'>
                <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">Div: @Html.DisplayFor(modelItem => item.Department.Division)</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>
        }
        </div>

Answer 1

У меня была похожая проблема, но я достиг ее с помощью CSS.Просто добавьте класс CSS и укажите его ширину в процентах.Например, 30%, если вы хотите отобразить 3 изображения, или 19%, если вы хотите отобразить 4, и вы также можете установить маржу соответственно, если вы хотите интервалы между изображениями.Таким образом, изображения изменят свой размер соответственно, независимо от того, какой размер экрана.

Пример:

img {
 width: 30%;
 float: left;
 margin: 1.66%;
}

Пожалуйста, обратитесь к этой ссылке пера кода также: https://codepen.io/alinaalam/pen/YeLqWm

Answer 2

Добавить упаковку div с style='page-break-after:always'.

<div class='row small'>
        @foreach (var item in Model.BuyerList.ImageList)
        {
            <div style='page-break-after:always'>
                <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">Div: @Html.DisplayFor(modelItem => item.Department.Division)</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>
            </div>
        }
        </div>