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

Tom*_*idd 11 html css browser printing

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

看起来他们已经基本上摆脱了这个概念(我猜人们不理解它),并且大多数网站都有文章之类的东西的"印刷版"等等.

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

跟进:您是否可以打印未在页面上呈现的内容?(即,隐藏当前正在渲染)?

小智 22

是的,您可以申请打印机css.有一个关于它的好文章在这里.


ska*_*adt 7

您可以通过创建直接针对打印的css样式表来实现此效果,另一个直接针对屏幕.

使用链接标记:

<link rel="stylesheet" type="text/css" href="print.css" media="print, handheld" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
Run Code Online (Sandbox Code Playgroud)

将样式表嵌入到文档中.

要隐藏很容易,只需将块样式设置为隐藏在您想要的任何样式表中,它就不会显示.例如:

.newStyle1 {
    display: none;
}
Run Code Online (Sandbox Code Playgroud)

然后newStyle1不会显示任何设置为样式的内容.


Dar*_*opp 2

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