生活随笔
收集整理的這篇文章主要介紹了
使用jqprint插件完成页面打印
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
使用jqprint插件完成頁面打印
jqprint是一個(gè)基于jQuery編寫的頁面打印的一個(gè)小插件，但是不得不承認(rèn)這個(gè)插件確實(shí)很厲害，最近的項(xiàng)目中幫了我的大忙，在Web打印的方面，前端的打印基本是靠window.print()的方式進(jìn)行打印的，而這個(gè)插件在其基礎(chǔ)上進(jìn)行了進(jìn)一步的封裝，可以打印網(wǎng)頁上的某個(gè)區(qū)域，這是個(gè)亮點(diǎn)。比如說現(xiàn)在要打印如下的一個(gè)效果：
我們可以通過寫代碼完成上述的效果，然后單擊網(wǎng)頁上的某個(gè)按鈕，在按鈕的處理方法里調(diào)用jqprint()，來完成這個(gè)區(qū)域的的打印顯示的操作，首先要獲取這個(gè)區(qū)域，然后調(diào)用一個(gè)方法即可了，如下所示：
[javascript]?view plaincopy print?
$("#visaReport").jqprint({});?? 這就是一個(gè)簡單的操作，但是實(shí)際需要的時(shí)候，有時(shí)我們頁面顯示樣式和我們打印的樣式是有些區(qū)別的，幸好CSS聲明的地方提供了一個(gè)media的屬性，我們可以指定其輸出的方式為print，即media=print的這個(gè)屬性，寫了這個(gè)屬性之后，所引入CSS的一些樣式在打印的時(shí)候才會(huì)生效了，通過在打印的時(shí)候，我們可以通過樣式去改變當(dāng)前網(wǎng)頁的顯示內(nèi)容，及顯示的樣式。先來看下代碼吧！
[html]?view plaincopy print?
<!DOCTYPE?html>??<html>?????????<head>????????????????<metacharsetmetacharset="UTF-8"/>????????????????<title>效果測試</title>????????????????<linkhreflinkhref="printShou.css"?rel="stylesheet"type="text/css"?media="print"/>????????????????<scripttypescripttype="text/javascript"src="jquery-1.7.2.js"></script>????????????????<scripttypescripttype="text/javascript"src="jquery.jqprint-0.3.js"></script>????????????????<scripttypescripttype="text/javascript">???????????????????????$(function()???????????????????????{??????????????????????????????$("#btn1").click(function()??????????????????????????????{?????????????????????????????????????$("#visaReport").jqprint({});??????????????????????????????});???????????????????????});????????????????</script>?????????</head>????????????<body>????????????????<input?type="button"id="btn1"?value="打印"/>????????????????<divclassdivclass="visaReport"?id="visaReport">???????????????????????<divclassdivclass="visa_head">??????????????????????????????<divclassdivclass="visa_head_title">XX中心</div>??????????????????????????????<divclassdivclass="visa_head_title">確認(rèn)及收據(jù)</div>???????????????????????</div>???????????????????????<divclassdivclass="visa_body">??????????????????????????????<div>?????????????????????????????????????<divclassdivclass="visa_person">??????????????????????????????????????????????????????????????????????????????????????????<div?class="visa_label">姓名:xiaoming</div>????????????????????????????????????????????????????????????????????????????????????????<div?class="visa_label">日期:2014/12/30</div>?????????????????????????????????????</div>??????????????????????????????????????????????????????????????????<tableclasstableclass="visa_fee">????????????????????????????????????????????<tr>???????????????????????????????????????????????????<td>項(xiàng)</td><td>價(jià)格</td>????????????????????????????????????????????</tr>????????????????????????????????????????????<tr>???????????????????????????????????????????????????<td>服務(wù)費(fèi)</td><td>119.00RMB</td>????????????????????????????????????????????</tr>????????????????????????????????????????????<tr>???????????????????????????????????????????????????<td>快遞費(fèi)</td><td>130.00R</td>????????????????????????????????????????????</tr>?????????????????????????????????????</table>?????????????????????????????????????<tableclasstableclass="visa_total_fee">????????????????????????????????????????????<tr>???????????????????????????????????????????????????<tdstyletdstyle="width:207px;">Total/總計(jì)</td><td>240.00RMB</td>????????????????????????????????????????????</tr>?????????????????????????????????????</table>??????????????????????????????</div>?????????????????????????????????????????</div>????????????????</div>????????????</body>??</html>?? 現(xiàn)在網(wǎng)頁中的頁面的樣式是這樣的：
而打印出來的效果確是第一張圖的樣式，這就是指定了media=print這個(gè)屬性之后，打印的時(shí)候會(huì)加載一個(gè)css文件所配置的。如下所示：
[html]?view plaincopy print?
<link?href="printShou.css"?rel="stylesheet"type="text/css"?media="print"/>?? jqprint這個(gè)插件能夠解決我們大部分開發(fā)中，Web頁面打印的問題，打印的樣式也是可控的。有時(shí)需要我們要為其指定一些屬性，才能完成需要的效果默認(rèn)是有如下的四個(gè)屬性：
[javascript]?view plaincopy print?
{????????????????debug:?false,??????????????importCSS:?true,???????????????printContainer:?true,??????????????operaSupport:?true}?? 如果在項(xiàng)目的開發(fā)中，不是要求太高的化，我想通過這個(gè)插件可以解決我們目前遇到的一些打印的問題。這個(gè)插件的操作也是特別的簡單的，通過這個(gè)插件，大部分的 頁面，我們都可以按照想要的樣式打印出來。
總結(jié)
以上是生活随笔為你收集整理的使用jqprint插件完成页面打印的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
