首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Css/C#在打印时使元素“消失”

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

Stack Overflow用户
提问于 2014-06-24 12:10:47
回答 1查看 739关注 0票数 2

我有一个非常简单的视图,它为控制器提交的每个对象呈现一个子视图。每个对象的信息都不是单独页面上的printet。所有这些都很好。不过,我想在这一页的顶部有一个没有印刷的标题。使用我使用的Css这个作品,但是第一个打印的页面将是空白的。如果我的评论超过标题,空白页将再次消失。有没有办法让标题在不打印空白页的情况下出现?

查看:

代码语言:javascript
复制
@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:

代码语言:javascript
复制
@media print
{    
    .no-print
    {
        display: none !important;
    }

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

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

这是我最后使用的解决方案:

CSS:

代码语言:javascript
复制
@media print
{    
    .no-print
    {
        display: none !important;
    }

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

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

查看:

代码语言:javascript
复制
@{
        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--;

        }
    }
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-06-24 12:33:13

下列措施将起作用:

代码语言:javascript
复制
@media print
{    
    .no-print
    {
        display: none !important;
    }

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

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

使用以下html:

代码语言:javascript
复制
<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>

所以,确保最后一个条目是一个additonal类标记,否则您将在最后得到一个空白页。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24386315

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档