11

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

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

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

4

13 回答 13

7

您可以通过创建一个直接针对打印的 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都不会显示。

于 2008-09-17T16:31:15.467 回答
3

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

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

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

<link rel="stylesheet" href="print.css" type="text/css" media="print" />
于 2008-09-17T16:36:13.613 回答
2

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

于 2008-09-17T16:28:20.557 回答
1

使用打印样式表。

编辑：关于后续操作，一般来说，您不能使用 CSS 将内容添加到页面中。

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

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

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

于 2008-09-17T16:29:20.027 回答
1

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

于 2008-09-17T16:30:26.433 回答
1

有几个选项可供您使用：

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

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

另请参阅CSS2 打印参考

于 2008-09-17T16:31:47.740 回答
0

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

示例：<link rel="stylesheet" type="text/css" media="print,held" href="foo.css">

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

于 2008-09-17T16:30:43.843 回答
0

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

只需在该样式表的样式表链接上包含一个 media="print" 属性。

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

于 2008-09-17T16:33:07.193 回答
0

我尝试根据媒体使用不同的样式表，但在获取所需的所有选项时遇到了麻烦。从那时起，我通常会重定向到我们 (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";
于 2008-09-17T16:33:45.413 回答
0

您可以定义特定于媒体类型的 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"/>
于 2008-09-17T16:36:28.493 回答
0

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

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

  • 打印布局重要时的 PDF
  • 纯文本比布局更重要时的 HTML
于 2008-09-17T16:37:39.413 回答
0

nsayer提到有一个打印按钮可以改变你的屏幕布局，然后启动一个window.print()

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

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

$(document).ready(function(){
    $("#printFriendly").click(function(){
       $(link[rel=link][media=screen]).remove();
       $(link[rel=link][media=print]).attr("media","screen");
    });
});
于 2008-09-17T20:09:45.330 回答
0

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

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

于 2008-09-25T17:48:35.327 回答