【问题标题】:What is the best way to give users a printer-friendly page option?为用户提供易于打印的页面选项的最佳方式是什么?
【发布时间】:2012-09-14 23:22:05
【问题描述】:

我的网站在 asp.net 4 / vb 中。我试图找出最好的方法来制作一个对打印友好的页面,该页面仅在顶部包含我们的徽标和相关信息,但省略了导航栏和其他不必要的内容。我有一个点击打印图标,它在所有浏览器中都能正常工作,但它并不总是适合打印出来。

我在这个网站上阅读过有关制作 print.css 样式表的内容,但我不确定如何编写样式表,或者是否必须将 div 属性分配给我想要省略的内容——以及这些帖子是较旧的帖子。是否建议我省略导航链接等,如果是,最好的方法是什么?感谢您的帮助!

【问题讨论】:

    标签: asp.net css printing stylesheet


    【解决方案1】:

    您不需要实际添加其他元素来包装您不想在打印时显示的内容。进行打印样式表的最佳方法是在打印页面时要隐藏的元素上应用一个类(可能称为print_hide)。例如:

    <div>Text</div>
    <img class='print_hide' src='some_huge_image.png'/>
    

    在你的 print.css 样式表中,你会这样做:

    .print_hide {
        display: none;
    }
    

    要应用样式表,请将其添加到您的head

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

    div 仍会打印,但图像不会。

    当然,除了您想要的任何其他样式更改之外,例如删除背景图像、更改颜色、字体等。

    将该类添加到要在打印时隐藏的东西是对现有代码的相对最小的更改。

    另一种选择是为您的所有页面创建一个单独的打印机友好版本,如果您的页面非常复杂,这可能就是这样做的方法。话虽如此,print.css 的好处(除了工作量更少)当然是用户不需要显式选择Printer friendly version

    【讨论】:

    • 嗨,SimpleCoder,感谢您抽出宝贵时间写出如此详细的说明,说明如何去做。我想我已经掌握了窍门,但我仍在研究细节。现在,当我将 class="print_hide" 放在 tr 或其他任何内容之后时,它会使其完全消失......即使从网络视图中......呵呵。但你肯定让我走上了正轨,我非常感谢你抽出时间提供深思熟虑的回应。
    • @JasonWeber:不客气! print.css 应该与一个样式标签一起应用,该标签的 media 属性设置为 print;我忘了添加这个,我的错。那会成功的。 (见我的编辑)
    • 是的,我确实设置了要打印的媒体...这是我实际上做对的一件事...哈哈。感谢@simplecoder 的提示,我会让它工作的——我快到了,只是想让它在所有浏览器中看起来都很好。像往常一样,IE 是一种痛苦。再次感谢!
    • 我认为主要问题是我已经在很多这些东西中有类,所以我想添加额外的类(class="noprint",CssClass="noprint"),我必须使用 div 标签。当我尝试使用 css 属性 display:inline 将其保持在一行时,noprint 不起作用!当我使用 float:left 时,noprint 可以工作,但在不同的浏览器(尤其是 IE)中看起来会有所不同。我将继续反复试验,希望在您的帮助和其他人给我的帮助下,其中一个最终会起作用——无论是在网络上还是在打印时。非常感谢您的帮助!
    • 解决了!我在 span 标签中使用了我的 noprint 类,我在 div 标签中使用了我的 smallprint 类——成功!我非常感谢您花时间帮助我!
    【解决方案2】:

    您可以使用 CSS @media 类型。

    <p> this should be part of the printed page </p>
    
    <div id="navigation_bar_that_should_not_be printed" class="noprint">.....</div>
    

    上面的一个简单的样式表是:

    @media screen
    {
       /* whatever styles you have for display */
    }
    
    @media print
    {
       .noprint { display: none; }
    }
    

    在上面,&lt;div&gt;class="noprint" 将照常显示在屏幕上,但不会打印出来。


    更新:

    CSS 中的“C”代表“级联”——意味着“最后”或最接近的指令获胜。我只能假设&lt;span class="bodycontent"...(是最后一个或最近的)覆盖了 div。

    ASP.Net 控件有一个 CssClass 属性,这就是您定义它的方式:

    <asp:HyperLink NavigateUrl="http://www.google.com" runat="server" CssClass="noprint" Text="foo" />
    

    您甚至可以在任何 ASP.Net 标记中直接输入 class="noprint"(而不是使用 CssClass) - VS 可能会抱怨,但应该没问题:

    <asp:HyperLink NavigateUrl="http://www.google.com" runat="server" class="noprint" Text="foo" />
    

    【讨论】:

    • 您好,感谢 EdSF 的回复。在我的 products.master 顶部,我有 |在我的 print.css 中,我有 @media print { .noprint { display: none; } } |最后,作为一个实验,我将 div 标签包裹在“其他独家产品”周围,因为我不知道如何在 asp:hyperlink 标签中放置一个类,所以它看起来像这样(见下一条评论):
    • .................... .............“其他独家产品”出现在网络上,但在打印时也会出现。但同样,我仍在学习 css,我真的很感谢你抽出时间来提供帮助——我相信我最终会弄明白的!
    • 成功!我在打印时摆脱了侧面导航菜单以及其他一些东西。我现在唯一遇到的问题是顶部导航菜单。如果我在它周围加上 div 标签,它就会以一种奇怪的方式出现在网络上。它看起来像这样: 等等等等,然后我有一堆 ...谢谢!
    • @JasonWeber 您可以为一个元素定义多个类。尝试CssClass="menu noprint" 为您的asp:Menu 控件
    • 是的,我在某些情况下使用了 @EdSF ...但是,在其他情况下,asp: 标签中的 CssClass 给了我一个 500 错误,所以我不得不使用 div 或 span标签。无论如何,现在一切正常——所有 5 个母版页都使用 noprint 样式表进行了更新,所以我感谢您和其他所有花时间提供帮助的人!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-07
    • 2015-09-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多