打印在 ASP.NET MVC3 中显示的页面的最快方法答案

【问题标题】：Fastest way To Print a page as it displayed in ASP.NET MVC3打印在 ASP.NET MVC3 中显示的页面的最快方法
【发布时间】：2012-06-25 08:25:11
【问题描述】：

我使用 ASP.NET MVC 3 和 Razor，并且我有一个视图页面需要打印具有当前显示的特定 div。这个页面有很多css是这样显示的，我不知道css，我只是想打印一个在页面中看到的div，所以我使用PrintElement这样的jQuery插件：

$('a.PrintBtn').click(function () {
 $('div#PrintMe').printElement();
 return false;
});

但是这给我返回了一个所有元素、字体和方向都乱七八糟的页面，那么如何解决呢？我也看到了这个重载：

$("selector").printElement(
    {
    overrideElementCSS:[
'thisWillBeTheCSSUsed.css',
{ href:'thisWillBeTheCSSUsedAsWell.css',media:'print'}]
    });

但这是什么意思？我不了解 css，这是否意味着我需要为打印页面编写一个新的 css？我怎样才能做到这一点？还有其他简单的方法可以将这个div 打印为显示格式吗？

【问题讨论】：

我相信您确实需要编写一些单独的 CSS 来执行此操作。其所有无序等的原因是因为未使用 CSS。
你能尝试删除 div 元素的 CSS 类吗（使用 .removeClass('someClass')，在 printElement 发生之前）？
@Koste 目标div 没有任何css 类，如果有这个有什么用？删除任何 css 类和显示的打印有什么关系？

标签： jquery asp.net-mvc asp.net-mvc-3 printing

【解决方案1】：

最简单的方法是创建一个 print.css CSS 文件。您可以将不希望显示的项目的显示属性设置为 false。当您在 head 标签中链接到 print.css 文件时，请使用以下内容：

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

这告诉浏览器只在打印模式下使用 CSS。通过使用以下媒体选项将 CSS 拆分为多个文件，您可以变得更加花哨

media="print" -> 仅在打印时使用
media="screen" -> 仅在屏幕上显示时使用
media="all" -> 始终应用

这很可能是首选方法，因为您不必依赖使用 Javascript 的客户端来获取页面/项目/对象的打印版本。

【讨论】：

谢谢，真的很有用，但是我不能用printElement这个，而且钢铁一切都乱七八糟，我用wndow.print()