好些项目需要实现页面打印, 特别是一些后台管理类系统, 下面介绍一款轻量级的打印插件:
1, 实现页面打印要引入 jQuery 和 Jqprint. 点击下载 https://github.com/tanathos/jquery.jqprint Jqprint 插件
- <script language="javascript" src="jquery-1.4.4.min.js">
- </script>
- <script language="javascript" src="jquery.jqprint-0.3.js">
- </script>
2,html 代码:
- <div id="print-area">
- <table>
- <tr>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- </tr>
- <tr>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- </tr>
- <tr>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- </tr>
- <tr>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- </tr>
- <tr>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- <td>test</td>
- </tr>
- </table>
- </div>
- <input type="button" onclick="print()" value="打印">
3,JavaScript 代码:
- <script language="javascript">
- function print(){
- $("#print-area").jqprint({
- debug: false,
- importCSS: true,
- printContainer: true,
- operaSupport: false
- });
- }
- </script>
4, 属性
- debug: false, // 如果是 true 则可以显示 iframe 查看效果 (iframe 默认高和宽都很小, 可以再源码中调大), 默认是 false
- importCSS: true, //true 表示引进原来的页面的 CSS, 默认是 true.(如果是 true, 先会找 $("link[media=print]"), 若没有会去找 $("link") 中的 CSS 文件)
- printContainer: true, // 表示如果原来选择的对象必须被纳入打印 (注意: 设置为 false 可能会打破你的 CSS 规则).
- operaSupport: false // 表示如果插件也必须支持歌 opera 浏览器, 在这种情况下, 它提供了建立一个临时的打印选项卡. 默认是 true
5, 特殊打印样式
如果在打印时需要独特的 CSS 样式, 除了可以直接写在 style 属性内还可以通过
<link href="printStyle.css" rel="stylesheet"type="text/css" media="print">
来引用外部 CSS 文件中的样式. 这样的好处是该样式只会在打印时才应用.
来源: http://www.bubuko.com/infodetail-2933997.html