CSS实现局部打印

本文介绍如何使用CSS控制网页打印内容,通过设置特定类名避免不必要元素被打印,并实现跨页打印。

        在实现打印预览的时候,可以采用JS来完成这一功能,但这样会让所有在页面上的部分都答应出来,包括像“打印预览”这样的按钮也会打印,这样的情况,可以采用CSS来完成局部答应的功能。

        代码如下:

  1. <style media=print>     
  2.     .Noprint {   
  3.         display:none;   
  4.     }   
  5.      
  6.     .NextPage {   
  7.         page-break-after:always;   
  8.     }   
  9. </style>    

这样,如果要某些内容不要打印出来,则元素的class为“Noprint”,若要内容在下一个页中打印,则该元素的class为“NextPage”。

说明,style media=print是说明该样式在打印的情况下起作用。

使用JavaScript和CSS可以实现网页打印,以下为具体方法和示例代码: ### 引入必要的脚本 需要引入jQuery库和`jquery.printarea.js`插件,示例代码如下: ```html <script src="http://www.haorooms.com/theme/assets/js/jquery.js"></script> <script src="jquery.printarea.js"></script> ``` ### 编写打印函数 定义一个打印函数,使用`printArea`方法来实现局部打印,示例代码如下: ```javascript <script type="text/javascript"> function doPrint() { $("#dayin").printArea(); } </script> ``` ### 创建需要打印的内容 在HTML中创建一个包含需要打印内容的元素,并为其设置一个ID,示例代码如下: ```html <div id="dayin"> <h1>haorooms打印标题</h1> <p>haorooms打印的文字</p> <img src="yideng.png"> <img src="haorooms.png"> </div> ``` ### 调用打印函数 可以通过按钮等元素来触发打印函数,示例代码如下: ```html <button onclick="doPrint()">打印</button> ``` ### CSS打印中的应用 CSS可以用来控制打印时的样式,例如设置打印页面的边距、字体大小等。可以使用`@media print`媒体查询来为打印设置特定的样式,示例代码如下: ```css @media print { body { font-size: 12pt; margin: 1cm; } } ``` ### 完整示例代码 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>打印示例</title> <script src="http://www.haorooms.com/theme/assets/js/jquery.js"></script> <script src="jquery.printarea.js"></script> <style> @media print { body { font-size: 12pt; margin: 1cm; } } </style> <script type="text/javascript"> function doPrint() { $("#dayin").printArea(); } </script> </head> <body> <button onclick="doPrint()">打印</button> <div id="dayin"> <h1>haorooms打印标题</h1> <p>haorooms打印的文字</p> <img src="yideng.png"> <img src="haorooms.png"> </div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值