Question

谷歌地图曾经这样做，当你点击“打印”链接时，发送到打印机的内容并不完全是你在屏幕上的内容，而是一个大致相同信息的格式不同的版本。

看起来他们已经基本上摆脱了这个概念（我猜人们不理解它），大多数网站都有文章之类的“印刷版”等等。

但是如果你想创建一个网页，使得页面的“打印机友好”版本被发送到打印机而不必为它创建一个单独的页面，你会怎么做？

跟进：您是否可以打印未在页面上呈现的内容？（即，从当前正在渲染中隐藏）？

Answer 1

是的，您可以申请打印机css。有一篇关于它的好文章here。

Answer 2

您可以通过创建直接针对打印的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样式的任何内容。

Answer 3

将介质指定为打印时，可以使用css执行此操作。

Answer 4

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

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

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

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

Answer 5

使用print stylesheet。

编辑：关于后续工作，通常情况下，您无法使用CSS向页面添加内容。

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

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

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

Answer 6

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

Answer 7

您可以选择几种方式：

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

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

另见CSS2 Print Reference

Answer 8

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

示例：＆lt; link rel =“stylesheet”type =“text / css”media =“print，handheld”href =“foo.css”＆gt;

这是自CSS2以来的标准，现在大多数浏览器都支持它。有关详细信息，请访问：http://www.w3.org/TR/CSS2/media.html

Answer 9

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

只需在样式表的样式表链接中包含media =“print”属性。

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

Answer 10

我尝试使用基于媒体的不同样式表，但是遇到了我需要的所有选项时遇到了麻烦。从那时起我经常重定向到我们（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";

Answer 11

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

Answer 12

另一种选择是让你调用iframe.contentWindow.print（）的隐藏IFRAME。这将允许您创建一个不可见的布局，可以根据需要进行打印。

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

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

Answer 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");
    });
});

Answer 14

您可以在打印样式表中使用CSS执行的任何操作。这意味着您可以隐藏屏幕版本中显示的打印版本中的内容，也可以隐藏打印时要显示的屏幕版本中的内容。您只需将display：none应用于相应样式表中的相应部分。

同样最好将文本的大小调整为打印版本（这是屏幕版本的错误的想法 - 坚持像素，ems或百分比）。关于像素到点的映射会随着不同的分辨率设备而变化，对于什么打印点大小存在普遍的一致意见。

Answer 15

这是另一个来自A List Apart的链接，关于打印css，名为Printing a Book with CSS：Boom！ http://www.alistapart.com/articles/boom/

如何将网页发送到打印机的内容与浏览器窗口中的内容不同？

15 个答案: