css - MVC5 在 A4 中打印多个局部 View

标签 css asp.net-mvc printing asp.net-mvc-5

我有一个应用程序,我需要打印“详细信息” View 以适应单个 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;
}

这对于单个页面工作正常,但我有另一个 View ,我将所述“详细信息”页面的多个实例称为部分,并且需要为每个实例(部分 View )在 A4 纸上打印它们

多个详细 View 如下:

 @@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 页面上,造成巨大的困惑,我该如何解决这个问题并让每个“详细信息 View 打印在自己的页面上。

最佳答案

您的定位与顶部对齐,左对齐 0。

尝试在每个“.a4page”周围添加样式为“page-break-after: always”的 div,并从“.a4page”类中删除分页符样式。

关于css - MVC5 在 A4 中打印多个局部 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41869389/

相关文章:

css - 页面宽度和容器宽度

css - 带有 CSS 的 GWT Html 文件

asp.net-mvc - OData 和 Web API 路由冲突

html - UIMarkupTextPrintFormatter 创建具有自定义背景和透明 HTML 内容的 PDF

html - 如何在 Angular 应用程序中正确设置打印方向?

html - TYPO3 横向边界在 "Grid Element"附近

javascript - 在javascript中匹配css规则

asp.net-mvc - 在 ASP.net MVC 2.0 中使用 Url.Content

asp.net-mvc - 模型绑定(bind)时查找 View 模型属性上的自定义属性

c++ - 使用 C++ 打印 HTML 标记