如何让网页向打印机发送与浏览器窗口中不同的内容？答案

【问题标题】：How can you make a web page send to the printer something different than what's in the browser window?如何让网页向打印机发送与浏览器窗口中不同的内容？
【发布时间】：2010-09-10 05:53:25
【问题描述】：

Google 地图过去常常这样做，当您点击“打印”链接时，发送到打印机的内容与您在屏幕上看到的内容并不完全相同，而是大部分相同信息的不同格式版本.

似乎他们已经在很大程度上摆脱了这个概念（我猜人们不理解它）并且大多数网站都有文章等内容的“印刷版”。

但是，如果您想制作一个网页，以便将“打印机友好”版本的页面发送到打印机，而无需为其制作单独的页面，您会怎么做？

【问题讨论】：

标签： html css browser printing

【解决方案1】：

您可以通过创建一个直接针对打印的 css 样式表和另一个直接针对屏幕的 css 样式表来实现此效果。

使用链接标签：

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

将您的样式表嵌入到您的文档中。

隐藏很简单，只需将块样式设置为隐藏在您想要的任何样式表中，它就不会显示。例如：

.newStyle1 {
    display: none;
}

那么任何设置为newStyle1 样式的东西都不会显示。

【讨论】：

【解决方案2】：

CSS 中的@media 规则可用于定义打印的替代规则。这通常用于隐藏导航和更改样式以更好地适应打印：

@media print {
  .sidebar { display: none; }
}

您还可以链接单独的样式表进行打印：

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

【讨论】：

【解决方案3】：

当您将媒体指定为打印时，您可以使用 css 执行此操作。

【讨论】：

【解决方案4】：

如果需要，另一种方法是让页面上的“打印”按钮以您决定的某种方式更改页面，然后执行 javascript 'window.print();'调出浏览器的打印对话框。

【讨论】：

【解决方案5】：

您有多种选择：

您可以打开一个新窗口，其中要打印的数据略有不同。
还有一些 CSS 样式可用于更改页面布局。
最后，您可以为屏幕、印刷媒体、盲文阅读器等指定完全不同的样式表。

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

另见CSS2 Print Reference

【讨论】：

【解决方案6】：

使用print stylesheet。

编辑：关于后续，一般情况下，您不能使用 CSS 向页面添加内容。

一种选择是在页面中包含您的仅打印内容，并为屏幕样式表隐藏它。你应该确保页面在没有 CSS 的情况下仍然有意义。

另一种选择是使用生成的内容，但这不受 Internet Explorer 7 及更低版本的支持，并且可能非常有限。

如果仅打印的内容是图像，您可以使用一种流行的图像替换技术将其替换掉。

【讨论】：

【解决方案7】：

最简单的方法是使用 CSS 媒体类型。对于您包含的每个 CSS 文件，您可以指定应该在哪里使用它：屏幕上、打印时、手持设备、屏幕阅读器或这些的各种组合。

示例：

这是自 CSS2 以来的标准，现在大多数浏览器都支持它。更多信息请点击此处：http://www.w3.org/TR/CSS2/media.html

【讨论】：

【解决方案8】：

CSS 允许您为特定类型的媒体创建样式表，这意味着您可以拥有仅在打印页面时应用的样式表，从而允许您对其进行不同的格式设置。

只需在该样式表的样式表链接中包含 media="print" 属性即可。

这个A List Apart article 在这个主题上似乎相当不错。

【讨论】：

【解决方案9】：

我尝试使用基于媒体的不同样式表，但在获取所需的所有选项时遇到了麻烦。从那时起，我通常重定向到我们 (Fusebox) 框架的不同入口（即 print.php 而不是index.php) 本质上是同一个文件，只是它设置了一个额外的标志/常量。

在与页面关联的 XSL 文件中，然后我会根据该标志/常量进行额外的工作，例如省略菜单、表格的列等。

即（页面显示了一个链接，用户必须单击才能在屏幕上显示密码。打印版本已打印密码。）

if (!BOOL_PRINT)
  echo "<TD class=\"tbl_teams_scroll_item\"><SPAN class=\"span_password_hidden\" id=\"span_password_{\$team_id}\" onClick=\"RevealPassword('{\$team_id}','{\$password}');\"><xsl:value-of select=\"/PAGE/TEXTS/HIDDEN\" /></SPAN></TD>\n";
else
  echo "TD class=\"tbl_teams_scroll_item\"><xsl:value-of select=\"PASSWORD\" /></TD>\n";

【讨论】：

上面的例子有些简化。实际上，您希望将示例 SPAN 包装到布尔值检查中，以避免 if/else 语句形式的双重代码。最后，常识比方法避免了更多的问题。

【解决方案10】：

您可以定义特定于媒体类型的 css 规则。下面是一个 css 示例（从http://www.w3.org/TR/CSS2/media.html 复制，第 7.2.1 节），它指定了不同的字体大小，什么在网页上显示和打印什么。

 @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }

或者，您可以指定将样式表包含在页面中时应应用于哪些媒体：

 <link href="webstyles.css" type="text/css" rel="stylesheet" media="screen"/>
 <link href="printstyles.css" type="text/css" rel="stylesheet" media="print"/>
 <link href="commonstyles.css" type="text/css" rel="stylesheet" media="screen,print"/>

【讨论】：

【解决方案11】：

另一种选择是隐藏一个您调用 iframe.contentWindow.print() 的 IFRAME。这将允许您创建一个完全按照您想要的方式打印的不可见布局。

当然，更好的解决方案是将文件导出为 PDF 并让用户以这种方式打印出来。 PDF 产生最高质量的输出。但是，用户要跳越多，所以经验法则是：

当打印布局很重要时的 PDF
纯文本比布局更重要时的 HTML

【讨论】：

【解决方案12】：

你可以用 CSS 做的任何事情都可以在打印样式表中做。这意味着您可以隐藏屏幕版本中显示的打印版本中的内容，或者隐藏您希望在打印时显示的屏幕版本中的内容。您只需将 display:none 应用于相应样式表中的相应部分。

另外，在打印版本中以磅为单位调整文本大小也是一个好主意（对于屏幕版本，这是一个坏的想法 - 在这里坚持像素、ems 或百分比）。由于像素到点的映射会因不同的分辨率设备而异，所以对于打印点大小的位置存在普遍共识。

【讨论】：

【解决方案13】：

nsayer 提到使用打印按钮更改屏幕布局，然后启动window.print()

这是一个可能被很多人忽视的解决方案，当您认为您的用户想要更多的所见即所得时应该考虑这种解决方案。它可能应该是一个“打印机友好”的链接，虽然它会改变您的工作表的媒体类型，而不是“打印这个”。

使用 jquery，您可以执行以下操作（未选中）：

$(document).ready(function(){
    $("#printFriendly").click(function(){
       $(link[rel=link][media=screen]).remove();
       $(link[rel=link][media=print]).attr("media","screen");
    });
});

【讨论】：