生活随笔
收集整理的這篇文章主要介紹了
使用jqprint插件完成页面打印
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用jqprint插件完成頁面打印
jqprint是一個基于jQuery編寫的頁面打印的一個小插件，但是不得不承認這個插件確實很厲害，最近的項目中幫了我的大忙，在Web打印的方面，前端的打印基本是靠window.print()的方式進行打印的，而這個插件在其基礎上進行了進一步的封裝，可以打印網頁上的某個區域，這是個亮點。比如說現在要打印如下的一個效果：
我們可以通過寫代碼完成上述的效果，然后單擊網頁上的某個按鈕，在按鈕的處理方法里調用jqprint()，來完成這個區域的的打印顯示的操作，首先要獲取這個區域，然后調用一個方法即可了，如下所示：
[javascript]?view plaincopy print?
$("#visaReport").jqprint({});?? 這就是一個簡單的操作，但是實際需要的時候，有時我們頁面顯示樣式和我們打印的樣式是有些區別的，幸好CSS聲明的地方提供了一個media的屬性，我們可以指定其輸出的方式為print，即media=print的這個屬性，寫了這個屬性之后，所引入CSS的一些樣式在打印的時候才會生效了，通過在打印的時候，我們可以通過樣式去改變當前網頁的顯示內容，及顯示的樣式。先來看下代碼吧！
[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">確認及收據</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>項</td><td>價格</td>????????????????????????????????????????????</tr>????????????????????????????????????????????<tr>???????????????????????????????????????????????????<td>服務費</td><td>119.00RMB</td>????????????????????????????????????????????</tr>????????????????????????????????????????????<tr>???????????????????????????????????????????????????<td>快遞費</td><td>130.00R</td>????????????????????????????????????????????</tr>?????????????????????????????????????</table>?????????????????????????????????????<tableclasstableclass="visa_total_fee">????????????????????????????????????????????<tr>???????????????????????????????????????????????????<tdstyletdstyle="width:207px;">Total/總計</td><td>240.00RMB</td>????????????????????????????????????????????</tr>?????????????????????????????????????</table>??????????????????????????????</div>?????????????????????????????????????????</div>????????????????</div>????????????</body>??</html>?? 現在網頁中的頁面的樣式是這樣的：
而打印出來的效果確是第一張圖的樣式，這就是指定了media=print這個屬性之后，打印的時候會加載一個css文件所配置的。如下所示：
[html]?view plaincopy print?
<link?href="printShou.css"?rel="stylesheet"type="text/css"?media="print"/>?? jqprint這個插件能夠解決我們大部分開發中，Web頁面打印的問題，打印的樣式也是可控的。有時需要我們要為其指定一些屬性，才能完成需要的效果默認是有如下的四個屬性：
[javascript]?view plaincopy print?
{????????????????debug:?false,??????????????importCSS:?true,???????????????printContainer:?true,??????????????operaSupport:?true}?? 如果在項目的開發中，不是要求太高的化，我想通過這個插件可以解決我們目前遇到的一些打印的問題。這個插件的操作也是特別的簡單的，通過這個插件，大部分的 頁面，我們都可以按照想要的樣式打印出來。
總結
以上是生活随笔為你收集整理的使用jqprint插件完成页面打印的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
