如何使网页向打印机发送与浏览器窗口中不同的内容?
题
谷歌地图过去常常这样做,当你点击“打印”链接时,发送到打印机的内容并不完全是屏幕上的内容,而是基本相同信息的不同格式版本。
看来他们已经很大程度上摆脱了这个概念(我猜人们不理解它),并且大多数网站都有文章等内容的“印刷版”。
但是,如果您想制作一个网页,以便将页面的“打印机友好”版本发送到打印机,而不必为其制作单独的页面,您会怎么做?
跟进: :您可以打印未在页面上呈现的内容吗?(即,隐藏当前正在渲染的内容)?
解决方案
是的,您可以应用打印机 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");
});
});