MVC打印分页符不起作用，内容被切断
MVC打印分页符不起作用，内容被切断
提问于 2018-05-28 12:28:07
我尝试了下面的代码在打印时分页，但它不起作用，我了解到分页在嵌套的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>回答 2
Stack Overflow用户
发布于 2018-06-04 04:41:40
使用style='page-break-after:always'添加wrap div。
<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>Stack Overflow用户
发布于 2018-06-06 17:29:22
我也有类似的问题，但我使用CSS实现了它。只需添加一个css类，并以百分比形式给出它的宽度。例如，如果要显示3张图片，则为30%；如果要显示4张图片，则为19%；如果要在图像之间留出空格，还可以相应地设置边距。这样，无论屏幕大小如何，图像都会相应地调整自身的大小。
示例：
img {
width: 30%;
float: left;
margin: 1.66%;
}请同时参考此代码笔链接：https://codepen.io/alinaalam/pen/YeLqWm
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50559132
复制相关文章
相似问题
腾讯云开发者
