`
徜徉の小溪
  • 浏览: 448081 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery 利用CSS 控制打印样式

阅读更多

一、添加打印样式 
1. 为屏幕显示和打印分别准备一个css文件,如下所示:
  用于屏幕显示的css: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />
  用于打印的css:<link rel="stylesheet" href="css/printstylesheet.css" media="print" />

2. import方式:
  <style type="text/css">
      @import url("css/printstylesheet.css") print;
  </style>

3. 直接把屏幕显示样式和打印样式写在一个css文件中:
  @media print {}{
    h1 {
      color: black;
    }
    h2 {}{
      color: gray;
    }
  }
  @media print里面的内容只对打印出来的内容有效,之外的内容就是屏幕显示的样式。


其他:
创建一个不指定媒体类型的样式表通常很有用(或者利用media="all")。当你准备好定义一些特别用
于打印的规则时,可以只创建一个单独的样式表,使任何在打印时看起来不好的样式都失效。使用这种方法的一个问题是必须确保打印机样式实际上确实覆盖了主样式表。可以使用!important.

二、打印样式注意事项: 

1. 打印样式中不推荐使用背景,因为浏览器默认情况下并不能打印出CSS中的背景内容,只有当浏览器被
  设置可以打印背景的情况下才能打印出背(ie的高级选项中可选)。即使背景可以打印,它也可能盖过叠在它上面的任何文本。
  这是真的,尤其对于用彩色背景在显示器上强烈对比的文本,但是在黑白打印机上打印时会融合这一背景。
  background:none;去掉背景
  图片和颜色。

  可以利用background-color属性设置背景颜色为白色,像这样:background-color: white。
  使用background的快捷法也可以获得相同的效果:background: white。因此像background: white;
  这样的声明不仅设置了背景颜色为白色,而且消除了所有背景图片。利用这个background的快捷属性,
  你实现了两个目的——设置了一个白色背景,并消除了图片——只用很少的代码。
  
2. 如果需要在打印内容中出现图片,请在HTML代码中加入。

3. 打印设置使用的是物理单位,所以尺寸最好不要用像素(px),可以用pt也可以用cm;

4. 隐藏不需要的或是次要的内容。display:none;

5. 尽量不要让内容浮动,有些浏览器打印浮动的div的过程中,会有一个麻烦,需要特别加以注意。 
 不要在打印的样式表中浮动的块,像这样:float: none;。例如,基于Gecko的浏览器
 (例如Netscape 6+),当用户用它来浏览一个打印输出页面时,它会截去浮动元素中的内容。
 这些内容就不会被传送到打印机,下一个页面也不会有它的踪影――它消失了。

6. 尽可能的在HTML代码中做好内容重要的先后次序,这样在打印样式中可以节省不少的麻烦。

7. 打印与网页不一样,打印一定要留下白边,单位用英寸(in)。

8. 要确保页面上的所有文本以黑色打印,就用通配选择器(见第54页)和!important来创建把每个
  标签都格式化为黑色文本的单个样式:
  *{ color: ##000# !important }

9. 在打印中显示链接url的信息:利用一个高级的选择器:after和一个高级的CSS属性称作content,
  把不在屏幕上显示的文本打印在一个样式元素的末端。
  不幸的是,:after选择器和content属性技巧在Internet Explorer 6或者更早的版本上不起作用
  (到编写本书为止,在IE 7上也不行)。但是它在Firefox和Safari上的确可以,因此你至少可以清楚
  地说明URL以便访问者可以使用他们的浏览器。

  为了做到这点,给打印样式表添加一个样式,在每个链接后面打印出URL。你甚至可以添加其他文本项
  目比如圆括号,使它更好看些:
  a:after {content: " (" attr(href) ") ";}

  然而,这个CSS不区分外部或者内部的链接,因此它也打印出到达同一个网站其他页面的没用的相对
  文档链接:“访问主页(../../index. html)。”利用一点点CSS 3魔法,就可以强制这个样式只打
  印绝对的URL(即以http://开头的那些),像这样:
  a[href^="http://"]:after {content: " (" attr(href) ") ";}


10.给打印添加分页符:两种被广泛认可的属性是page-break-before和page-break-after。
  page-break-before告诉网页浏览器在一个指定样式之前插入一个分页符。利用page-break-before
  属性使图片打印在一张新页面上,并且适合整张页面。
  要使一个元素作为打印页上的最后一个项目显示,就给那个元素的样式添加page-break-after: always。

  创建两个类样式,以类似于.break_after和.break_before的名字来命名,像这样:
  .break_before { page-break-before: always; }
  .break_after { page-break-after: always; }

  然后你可以选择性地把这些样式应用给应该打印在网页顶部或者底部的元素。


三、测试打印样式 

通常来说我们不可能用打印机来进行测试,在IE浏览器菜单栏“文件”中有“打印预览”,可以通过这
打印预览来做测试。

分享到:
评论

相关推荐

    jQuery和css3文章标题动画特效

    翻转效果利用CSS3的`transform`属性,尤其是`rotateY`和`rotateX`,可以实现元素的三维空间翻转。结合jQuery,可以控制翻转的时机和方向,使标题在特定时间或事件下翻转展示另一面。 ### 五、翻牌效果 翻牌效果...

    使用jquery+CSS实现控制打印样式

    文章主要介绍了使用jQuery和CSS来实现对打印样式的控制,以下是从文章中提炼出的相关知识点: 一、添加打印样式的方法 1. 为屏幕显示和打印分别准备不同的CSS文件。这是最常用的方法,通过HTML中的link标签指定不同...

    JQuery结合CSS操作打印样式的方法

    9. **链接URL信息的显示:** 在打印样式中,可以利用CSS的`:after`伪元素和`content`属性来显示链接的URL信息,但要注意浏览器兼容性问题。 ### 知识点三:打印样式中的CSS技巧 1. **媒体查询的使用:** 媒体查询...

    jquery调用打印机打印

    在`jQuery`中,我们可以先隐藏不需要打印的元素,然后创建一个专门用于打印的CSS样式表,以控制打印样式。这可以通过创建一个新的`&lt;link&gt;`标签来实现,该标签链接到一个只在打印时生效的CSS文件。示例如下: ```...

    jquery实现通用网页打印

    1. **创建打印样式表**:在打印时,往往需要与屏幕显示不同的样式。为此,可以在CSS中定义媒体查询@media print,专门为打印场景设置样式。例如,可以隐藏导航栏、侧边栏等非主要内容元素。 ```css @media print { ...

    jQuery.print实现jqprint打印程序

    CSS3则带来了更强大的样式控制,包括媒体查询(Media Queries)功能,这使得我们可以针对不同的设备(如屏幕和打印机)定义不同的样式。 在`jQuery.print`插件中,JavaScript和jQuery是实现打印功能的核心。...

    批量打印之jquery局部打印

    - **配置选项**:插件可能提供一些可配置的选项,如排除某些元素、设置打印样式等,可以根据需求进行定制。 3. **源码分析**: - **jQuery代码**:通过阅读插件源码,我们可以理解其内部工作原理,比如如何复制...

    jquery网页打印控件制作页面局部打印文本效果

    6. **取消打印后恢复页面状态**:在用户关闭打印对话框后,记得将页面恢复到原始状态,移除添加的打印样式和iframe,以避免对页面其他功能造成影响。 在标签"jquery 打印控件"中,我们理解这是关于使用jQuery实现...

    jQuery CSS3模拟印钞效果.zip

    在"jQuery CSS3模拟印钞效果"这个案例中,可能使用了jQuery来控制钞票的出现时机、速度以及动画顺序,同时利用CSS3的属性如`transform`和`transition`来完成具体的动画效果。 **实现步骤** 1. **HTML结构**:首先,...

    jQuery+CSS3模拟印钞效果.zip

    通过jQuery实现动态交互,利用CSS3进行复杂的动画设计,以及HTML5提供结构化内容,开发者成功地创建了一个引人入胜的用户体验。这个项目不仅是学习和实践这些技术的好例子,也为其他开发者提供了灵感和参考。

    jquery打印

    - CSS文件中的`print.css`可以专门用于设定打印样式,与屏幕显示的`screen.css`分开,确保打印效果与预期一致。 5. **jsp技术**: - JSP(JavaServer Pages)是Java平台上的服务器端脚本语言,用于生成动态网页...

    JQuery打印插件jquery.PrintArea.js与实例

    这时候,你可以通过选择器精确地控制打印范围,并利用CSS来定制打印样式。 PrintArea.js插件的一个优点是它兼容大部分现代浏览器,包括Chrome、Firefox、Safari和Internet Explorer等,这使得它在跨平台应用中表现...

    jquery.PrintArea.js-2.4.0-打印功能.rar

    2. **样式保持**:插件能够保留打印区域内的CSS样式,使得打印出来的内容与屏幕显示一致,保持良好的视觉效果。 3. **自定义打印选项**:可以设置打印选项,如是否打印背景色、边距等,满足不同场景的需求。 4. **...

    jquery打印插件制作网页文本打印效果代码

    在本教程中,我们将探讨如何利用 jQuery 创建一个打印插件,以实现网页文本的打印效果。这涉及到的知识点包括 jQuery 的基本使用、HTML 结构、CSS 样式以及浏览器的打印功能。 首先,我们需要理解 jQuery 的核心...

    批量打印之jquery局部打印和smsx.cab打印联合使用

    mediaPrint : false, // 是否使用媒体打印样式 noPrintSelector : ".no-print", // 需要排除不打印的元素 iframe : true, // 是否创建一个iframe用于打印 beforePrint : function() { // 打印前执行的函数 }, ...

    jQuery 网页打印组件升级版(支持打印 iframe 内的内容)

    除了`isFrame`参数,该组件还可能提供其他可配置选项,如排除某些元素、自定义打印样式等。例如,如果你希望排除某个ID为`no-print`的元素,可以这样设置: ```javascript $.print({ isFrame: true, exclude: ['#...

    jquery.PrintArea.js实现打印发货单功能

    2. **CSS样式控制**:为了使打印出来的发货单美观且易于阅读,我们需要对打印区域的样式进行调整。这包括字体、颜色、布局、边距等,确保在打印预览中呈现良好的视觉效果。在CSS中,我们可以使用`@media print`媒体...

    jquery打印插件

    jQuery打印插件往往支持自定义设置,如排除某些元素、添加页眉页脚、设置打印样式等。这些设置可以通过传递参数到打印方法来实现。例如,如果要排除某个ID为`#notPrint`的元素,可以这样调用: ```javascript $("#...

    jQuery.print实现打印(导出)Html页面

    - 如果需要服务器端控制打印,可以利用PHP、Node.js等后端技术配合前端实现。 综上所述,jQuery.print是一个实用的工具,可以帮助开发者简化网页内容的打印和导出过程。通过合理的HTML结构、CSS样式和JavaScript...

    jQuery 打印或者保存为PDF.rar

    本资源“jQuery 打印或者保存为PDF.rar”显然聚焦于利用jQuery实现网页内容的打印和转换为PDF的功能。下面将详细探讨jQuery如何与打印和PDF生成相关联,并提供实现这一目标的关键知识点。 首先,jQuery本身并不直接...

Global site tag (gtag.js) - Google Analytics