更改打印的页面样式

分享于 

3分钟阅读

Web开发

  繁體

问题

想一想web应用中的情况,我们需要使用 IE 打印选项以用户友好的格式打印报告页面。 也就是说,在打印过程中,我们主要需要改变页面的样式。 我们该如何实现这个? 在本文中,我将介绍如何执行这里操作。

在解释之前,我们可以看看一个例子。 假设我打印这个网页:

页面必须更改为:

你注意到网页上的变化了? 在样式表的帮助下可以实现这一点。

解决办法是什么呢

我们将看到在打印过程中如何实现这个。 为此,我们需要执行以下操作:

步骤 1

首先,我们需要创建两个样式表,一个用于默认视图,另一个用于打印。

步骤 2

现在,在页面 header 中声明样式表,例如:

<LINKtitle="MainStyles"href="styles/DefaultStyles.css"type="text/css"rel="stylesheet"><LINKtitle="PrintStyles"media="print"href="styles/Print.css"type="text/css"rel="stylesheet">

我们需要注意的一点是,在第二个链接上,我们需要提供属性 media="print"

在这种情况下,将两个 header 和footer表放在一起,并将CSS类名作为 .print。 在默认样式页中,在类 .print 中给出 display:none;,在打印样式类中提供 display:inline。 对于同一类,我们声明了两个样式表,。 将根据页面的状态自动从样式中获取正确的值。 这将应用于所有控件。

在打印页面样式中,首先给出:

#SearchDescription, #Cancel, #Buttons, 
 #SearchCriteria,.clsBtnControl{
 display: none;
}

这是为了在打印选项中禁用所有不需要的控件。 然后,我们启用搜索选项中没有显示的控件。

.Print {
 display:inline;
}

你可以将这里 header 和页脚作为两个单独的用户控件进行泛化,因此你可以将它的用作项目中的常规 header 和页脚。 在搜索过程中,我们只将值设置为控件。

对于按钮,我们做同样的事情。 在打印选项中设置 false的可见性,这样我们就可以从 IE 打印选项中获得用户友好的打印格式。

现在不需要为打印创建单独的选项。 它很友好,你可以很容易地设置这个。


style  print  打印  
相关文章