Google Maps经常这样做，当我们单击"打印"链接时，发送到打印机的内容与屏幕上显示的不完全相同，而是大多数相同信息的不同格式版本。

看来他们已经大大偏离了这个概念(我想人们对此并不理解)，并且大多数网站都有诸如文章之类的东西的"印刷版"。

但是，如果我们要制作一个网页，使该页面的"打印机友好"版本发送到打印机，而不必为其创建单独的页面，我们将如何做？

后续：我们可以打印页面上未呈现的内容吗？ (即从当前渲染中隐藏)？

解决方案

回答

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

回答

是的，我们可以应用打印机CSS。这里有一篇很好的文章。

回答

使用打印样式表。

编辑：关于后续操作，通常不能使用CSS将内容添加到页面中。

一种选择是在页面中包含仅打印内容，然后将其隐藏以用于屏幕样式表。我们应该确保该页面在没有CSS的情况下仍然有意义。

另一种选择是使用生成的内容，但是Internet Explorer 7和更低版本不支持此功能，并且可能会受到很大限制。

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

回答

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

回答

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

示例：<link rel =" stylesheet" type =" text / css" media =" print，掌上电脑" href =" foo.css">

自CSS2以来，这一直是一个标准，现在大多数浏览器都支持它。可在此处获取更多信息：http://www.w3.org/TR/CSS2/media.html

回答

我们可以通过创建一个直接针对打印的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"样式的任何内容都不会显示。

回答

有几个选项供我们选择：

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

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

另请参见CSS2打印参考

回答

CSS允许我们为特定类型的媒体创建样式表，这意味着我们可以拥有仅在打印页面时使用的样式表，从而可以使页面的格式不同。

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

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

回答

我尝试根据媒体使用不同的样式表，但遇到麻烦，无法获得所需的所有选项。从那时起，我通常重定向到我们的(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";

回答

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

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

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

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

回答

我们可以定义特定于媒体类型的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"/>

回答

还有一种选择是使用一个隐藏的IFRAME，将其称为iframe.contentWindow.print()。这样一来，我们就可以创建不可见的布局，以完全按照要求进行打印。

当然，更好的解决方案是将文件导出为PDF，并让用户以这种方式打印出来。 PDF产生最高质量的输出。但是，用户跳过去又是另外一回事，因此经验法则是：

• 列印版面重要时的PDF
• 纯文本比布局更重要的HTML

回答

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

这种解决方案可能会被很多人忽略，当我们认为用户希望获得更多的所见即所得时，应该考虑使用该解决方案。它可能应该是"打印机友好"链接，尽管它会更改工作表纸张的介质类型，而不是"打印此"。

使用jquery，我们可以执行以下操作(未选中)：

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

回答

使用CSS可以做的任何事情都可以在打印样式表中完成。这意味着我们可以隐藏要在屏幕版本中显示的打印版本中的内容，也可以在打印时要显示的屏幕版本中隐藏内容。我们要做的就是将display：none应用于相应样式表中的相应部分。

同样，对于打印版本，以磅为单位调整文本大小也是个好主意(对于屏幕版本，此处坚持像素，ems或者百分比是个坏主意)。关于什么是打印点尺寸，存在普遍的共识，因为像素到点的映射将随不同分辨率的设备而变化。

回答

这是A List Apart中有关打印css的另一个链接，称为"使用CSS印刷书：B！ http://www.alistapart.com/articles/boom/