Css/C# 使元素在打印时“消失”答案

【问题标题】：Css/C# Make element "disappear" on printCss/C# 使元素在打印时“消失”
【发布时间】：2014-06-24 12:10:47
【问题描述】：

我有一个非常简单的视图，它为控制器移交的每个对象呈现一个子视图。每个对象的信息都不是打印在单独的页面上。所有这些工作正常。但是，我希望在未打印的页面顶部有一个标题。使用我使用的 Css，但是第一个打印页面将是空白页面。如果我只是评论标题，空白页就会再次消失。有没有什么方法可以在不打印空白页的情况下将标题放在那里？

查看：

@model IQueryable<Event>

@{
    ViewBag.Title = "Druckansicht";
}

@section Scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            window.print();
        })
    </script>
}

<h1 class="no-print">Deine Druckansicht vom @ViewBag.StartDate bis zum @ViewBag.EndDate</h1>

@foreach (Event evnt in Model)
{
    <div class="page-break">
        @{Html.RenderAction("PrintChild", "Events", new { ID = evnt.EventID });}
    </div>
}

CSS：

@media print
{    
    .no-print
    {
        display: none !important;
    }

    .page-break
    {
        page-break-before: always;
    }
}

到样式表等的链接是在 _Layout 视图中完成的。

这是我最终使用的解决方案：

CSS：

@media print
{    
    .no-print
    {
        display: none !important;
    }

    .page-break
    {
        page-break-after: always;
    }

    .page-break-last
    {
         page-break-after: avoid;
    }
}

查看：

@{
        int i = Model.Count();
        foreach (Musa.Models.Event evnt in Model)
        {
            if (i == 1)
            {
                <div class="page-break page-break-last">
                    @{Html.RenderAction("PrintChild", "Events", new { ID = evnt.EventID });}
                </div>
            }
            else
            {
                <div class="page-break">
                    @{Html.RenderAction("PrintChild", "Events", new { ID = evnt.EventID });}
                </div>
            }
            i--;

        }
    }

【问题讨论】：

height=0, overflow:hidden 呢？

标签： c# html css asp.net-mvc printing

【解决方案1】：

以下方法可行：

@media print
{    
    .no-print
    {
        display: none !important;
    }

    .page-break
    {
        page-break-after: always;
    }

    .last-page{
        page-break-after: avoid;
    }
}

使用以下html：

<h1 class="no-print">Header</h1>

<div class="page-break">Test 1</div>
<div class="page-break">Test 2</div>
<div class="page-break last-page">Test 3</div>

所以要确保最后一个项目是一个附加的类标签，否则最后你会得到一个空白页。

【讨论】：