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

StackOverflow https://stackoverflow.com/questions/85019

  •  01-07-2019
  •  | 
  •  

题

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

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

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

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

有帮助吗？

解决方案

是的，您可以应用打印机 CSS。有一篇关于它的好文章 这里.

其他提示

您可以通过创建一个直接针对打印的 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 来执行此操作。

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

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

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

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

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

有多种选择可供您选择：

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

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

也可以看看 CSS2 打印参考

用一个 打印样式表.

编辑： 关于后续，一般来说，你不能用CSS向页面添加东西。

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

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

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

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

例子： <link rel =“stylesheet”type =“text / css”media =“打印，手持”href =“foo.css”>

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

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

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

这 分开列出文章 似乎在这个主题上相当不错。

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

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

IE。（页面显示一个链接，用户必须单击该链接才能在屏幕上显示密码。印刷版印有密码。）

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 规则。以下是一个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

您可以使用 CSS 执行的任何操作都可以在打印样式表中执行。这意味着您可以隐藏屏幕版本中显示的打印版本中的内容，或者隐藏您想要在打印时显示的屏幕版本中的内容。您所做的就是将 display:none 应用于相应样式表中的相应部分。

此外，最好将打印版本的文本大小设置为磅（这是一个 坏的 屏幕版本的想法 - 此处坚持像素、ems 或百分比）。对于打印点的大小存在普遍共识，因为像素到点的映射会随着不同分辨率设备的不同而变化。

这是 A List Apart 中有关打印 css 的另一个链接，名为“使用 CSS 打印书籍”：繁荣！ http://www.alistapart.com/articles/boom/

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

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

使用jquery，你可以做这样的事情（未检查）：

$(document).ready(function(){
    $("#printFriendly").click(function(){
       $(link[rel=link][media=screen]).remove();
       $(link[rel=link][media=print]).attr("media","screen");
    });
});
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top