最近項目中需要在頁面上添加一個打印的按鈕,上網搜索了一下就發現了這個好用的超輕量插件,使用起來很方便
1.首先需要引入必須的js文件
<script language="javascript" src="jquery-1.4.4.min.js"></script> <script language="javascript" src="jquery.jqprint-0.3.js"></script>
2.之后只要找到需要打印的頁面區域$().jqprint()即可
比如:
<body> <button>打印</button> <div id="print"> <p>這里是要打印的內容</p> <p>打印內容包括:我的打印內容,可以是圖片,按鈕,表格等任何元素</p> </div> </body> <script> $("#print").jqprint(); </script>
就會調用瀏覽器的打印功能來打印id為print中的內容
3.jqprint()中可以寫入參數,一般有以下幾種:
jqprint({ debug: false, //如果是true則可以顯示iframe查看效果(iframe默認高和寬都很小,可以再源碼中調大),默認是false importCSS: true, //true表示引進原來的頁面的css,默認是true。(如果是true,先會找$("link[media=print]"),若沒有會去找$("link")中的css文件) printContainer: true, //表示如果原來選擇的對象必須被納入打印(注意:設置為false可能會打破你的CSS規則)。 operaSupport: true//表示如果插件也必須支持歌opera瀏覽器,在這種情況下,它提供了建立一個臨時的打印選項卡。默認是true })
4.最后,如果其在打印時需要獨特的css樣式,除了可以直接寫在style屬性內還可以通過
<link href="printShou.css" rel="stylesheet"type="text/css" media="print"/>
來引用外部css文件中的樣式。這樣的好處是該樣式只會在打印時才應用,這樣在打印表格時就可以防止表格變形啦。