打印友好的 ASP.NET MVC 3 视图

Posted

技术标签:

【中文标题】打印友好的 ASP.NET MVC 3 视图【英文标题】:Print-friendly ASP.NET MVC 3 view 【发布时间】:2011-07-30 15:27:25 【问题描述】:

我想创建我的 ASP.NET MVC 3 视图的打印友好版本,我该怎么做?另外,如果我需要制作视图的几个部分的打印友好版本怎么办?

问候。

【问题讨论】:

【参考方案1】:

我会只通过 CSS 来实现这一点,而与 MVC 无关。

只需为打印定义一个单独的样式表。例如

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

这样做的好处是:

这就是 CSS 旨在为不同设备以不同方式呈现相同内容的意义 工作量少,您不必维护 2 个 MVC 视图 对于用户来说更容易,无论他们在哪个页面上,他们只需按浏览器上的打印按钮,它就会工作,他们不必点击单独的打印机友好版本链接。 您对 CSS 所做的更改将在整个网站范围内进行,例如,如果您不想打印您在 CSS 中定义的徽标或菜单,则在您的 CSS 中进行打印,所有页面都将应用该样式。

【讨论】:

如何定义打印友好的 css ? 查看 mkeats 答案了解如何【参考方案2】:

我使用相同的视图,但有 2 个 CSS 文件(一个带有 media="screen",另一个带有 media"print")。

在打印 CSS 文件中,我使用 CSS 隐藏所有不相关的 DOM 元素,使用 display:none;

示例 MVC 视图:

<html>
<head>
    <link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
    <link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>
<body>
    <div id="pageHeader">This will not be shown in print - menubar, etc.</div>
    <h1>Title</h1>
    <p>Text</p>
</body>
</html>

示例 print.css 文件:

#pageHeader 
    display: none;

看看这篇关于 CSS 打印的优秀“A List Apart”文章:http://www.alistapart.com/articles/goingtoprint/

【讨论】:

@mkeats : 浏览器如何在点击链接时选择打印友好的样式表 浏览器将使用 screen.css 文件进行正常浏览。当有人打印或打印预览时,浏览器将自动使用 print.css 文件呈现。您无需执行任何操作即可在不同文件之间切换。 @mkeats:我可以保留 css 文件名,只添加/更改媒体类型吗? 是的,只要正确设置了媒体属性,文件名/路径可以是任何内容。 只有当用户打印页面或进行打印预览时,页面才会使用打印友好的样式表显示。您实际上不会自己切换到打印友好的视图。您可以使用&lt;a href="javascript:window.print()"&gt;Click to Print This Page&lt;/a&gt; 使浏览器打开打印对话框。

以上是关于打印友好的 ASP.NET MVC 3 视图的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ASP.NET MVC 视图中用 C# 打印出 GridView?

ASP.NET MVC 中的 RSS 源

MVC-3 ASP.NET 共享视图-重定向-Razor

ASP.NET MVC 3 无法识别 .cshtml 视图文件

ASP.NET MVC 3、Razor 视图和可移植区域

007.Adding a view to an ASP.NET Core MVC app -- 在asp.net core mvc中添加视图