MVC 打印分页符不起作用,内容被切断

Posted

技术标签:

【中文标题】MVC 打印分页符不起作用,内容被切断【英文标题】:MVC Print Page break not working, contents are cut off 【发布时间】:2018-11-06 14:53:01 【问题描述】:

我尝试使用下面的代码在打印时中断页面,但是它不起作用,我了解到分页符在嵌套的 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"  />
                    
                    else
                    
                        <img src="~/AdTrack Images/NoProductImage.png" style="height:150px;" class="card-img-top"  />
                    
                      <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>

【问题讨论】:

@PaTPH 您可以在图像 img page-break-before: auto; 上添加以下属性/* 'always'、'avoid'、'left'、'inherit' 或 'right' / page-break-after: auto; / 'always'、'avoid'、'left'、'inherit' 或 'right' / page-break-inside: Avoid; / 或“自动”*/ @RakeshKumar 它的 div 带有卡片和内容,所以显然它不起作用 对这个 Guyz 有什么帮助吗? 【参考方案1】:

divstyle='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"  />
                        
                        else
                        
                            <img src="~/AdTrack Images/NoProductImage.png" style="height:150px;" class="card-img-top"  />
                        
                          <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>

【讨论】:

【参考方案2】:

我遇到了类似的问题,但我使用 CSS 实现了它。只需添加一个 CSS 类并以百分比形式为其指定宽度。例如,如果要显示 3 张图片,则为 30%;如果要显示 4 张,则为 19%,如果您希望图像之间有空格,也可以相应地设置边距。这样,无论屏幕大小如何,图像都会相应地调整自己的大小。

例子:

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

请参考此码笔链接:https://codepen.io/alinaalam/pen/YeLqWm

【讨论】:

以上是关于MVC 打印分页符不起作用,内容被切断的主要内容,如果未能解决你的问题,请参考以下文章

分页符在 Bootstrap 模式下不起作用

避免在行跨度不起作用的标题表中出现分页符(打印)

打印带有强制分页符的表格

JQuery Mobile 中的分页符?

Page-Break-inside 属性在 chrome 中不起作用

文本区域占位符不起作用