Question

我有一个应用程序，我需要打印“详细信息”视图以适应单个A4页面，我已经用一些CSS管理了这一点，如下所示

<link rel="stylesheet" type="text/css" media="print" href="bootstrap.min.css">

@@media print {
    .printest {
        background-color: white;
        height: auto;
        min-height: 29.7cm;
        width: auto !important;
        min-width: 21cm;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding:0px;
        font-size: 9px;            
    }

    .dl-horizontal > dd:after {
        display: table;
        content: "";
        clear: both;
    }

    .container {
        display: flex;
    }

        .container > div {
            flex: 1;
        }

        .container > dl {
            flex: 1;
        }

    dl {
        width: 100%;
        background: #ff0;
        padding: 0;
        margin: 0;
    }

    dt {
        float: left;
        width: 50%;
        background: #cc0;
        padding: 0;
        margin: 0;
    }

    dd {
        float: right;
        width: 49.5%;
        background: #ff0;
        padding: 0;
        margin: 0;
        border: 1px solid #000;
    }

    .maincolumns {
        float: left;
        width: 45%;
    }

    .no-print, .no-print * {
        display: none !important;
    }

    a[href]:after {
        content: none !important;
    }

    a {
        content: none !important;
    }

    button {
        content: none !important;
    }
}

@@media screen {
}

@@page {
    size: A4;
}

这适用于单个页面，但我有另一个视图，我将所述“详细信息”页面的多个实例称为部分，并且需要在A4纸上为每个实例打印这些实例（部分视图）

多个详细信息视图如下：

 @@media print {
        .a4page {
            background-color: white;
            height: auto;
            width: auto !important;
            min-width: 21cm;
            top: 0;
            left: 0;
            margin: 0;
            font-size: 9px;
            page-break-after:always;
            page-break-before:always;
            page-break-inside:avoid;
            float: none!important;
            overflow:visible!important;
            position:relative;

        }

    .printest {
        background-color: white;
        height: auto;
        min-height: 29.7cm;
        width: auto !important;
        min-width: 21cm;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        font-size: 9px;
    }

    .dl-horizontal > dd:after {
        display: table;
        content: "";
        clear: both;
    }

    .container {
        display: flex;
    }

        .container > div {
            flex: 1;
        }

        .container > dl {
            flex: 1;
        }

    dl {
        width: 100%;
        overflow: hidden;
        background: #ff0;
        padding: 0;
        margin: 0;
    }

    dt {
        float: left;
        width: 50%;
        background: #cc0;
        padding: 0;
        margin: 0;
    }

    dd {
        float: right;
        width: 50%;
        background: #dd0;
        padding: 0;
        margin: 0;
    }

    .maincolumns {
        float: left;
        width: 50%;
    }

    .no-print, .no-print * {
        display: none !important;
    }

    a[href]:after {
        content: none !important;
    }

    a {
        content: none !important;
    }

    button {
        content: none !important;
    }
}

<h1>Details</h1>


<h3>@Html.DisplayFor(modelItem => modelItem.FirstOrDefault().Name)</h3>
@foreach (var item in Model)
{
    <div class="a4page">
        @Html.Partial("Details", item)
    </div>
}

我遇到的问题是，所有这些都打印在一个A4页面上，彼此之间造成了巨大的混乱，我该如何解决这个并获得这些“详细信息视图在他们自己的页面上打印。” / p>

Answer 1

您的定位与top，left 0对齐。

尝试添加一个带风格的div＆page 39-break-after：always＆＃39;围绕每个＆＃39; .a4page＆＃39;，并从＆＃39; .a4page＆＃39;中删除分页符样式。类。

MVC5在A4中打印多个局部视图

1 个答案: