很久沒(méi)寫(xiě)文章了，最近做了一個(gè)員工入職的項(xiàng)目，該系統(tǒng)有一個(gè)批量打印個(gè)人信息的功能需求。因?yàn)橹耙矝](méi)接觸過(guò)打印這方面的功能，就上網(wǎng)查了下，發(fā)現(xiàn)jquery有個(gè)打印功能的 API（PrintArea） ,關(guān)于這個(gè)api大家有興趣的可以自行查看相關(guān)知識(shí)，在此我就不詳細(xì)介紹了。當(dāng)時(shí)我就采取了使用這個(gè)api去實(shí)現(xiàn)打印功能，當(dāng)我用了這個(gè)api去實(shí)現(xiàn)實(shí)現(xiàn)功能時(shí)，發(fā)現(xiàn)確實(shí)可以調(diào)用瀏覽器的打印功能，不過(guò)打印的內(nèi)容卻是空白的，沒(méi)有任何信息。然后就上網(wǎng)查了下，去了jquery官網(wǎng)查看了這個(gè)api，大部分都說(shuō)是之前是支持打印的，現(xiàn)在需要在源碼上加一句代碼，當(dāng)時(shí)搞了好久沒(méi)搞明白就放棄了，不過(guò)我覺(jué)得應(yīng)該是可行的，只是我功夫沒(méi)到家吧，感興趣的小伙伴倒是可以去嘗試一下，應(yīng)該會(huì)有很大的收獲的。這個(gè)方案走不通了，就只能繼續(xù)探索其他的方案了。

正在這個(gè)比較著急的時(shí)刻，發(fā)現(xiàn)了 window.print() 方法，原來(lái)直接就可以利用window的方法就可以實(shí)現(xiàn)打印功能了。正在我欣喜若狂的時(shí)候，一片烏云已悄悄來(lái)到了我的頭上，瞬間人生灰暗了。雖說(shuō)可以實(shí)現(xiàn)打印功能，但是網(wǎng)頁(yè)批量打印的時(shí)候內(nèi)容就會(huì)緊排到一起。哎，本以為可以完美解決這個(gè)問(wèn)題的時(shí)候，誰(shuí)曾想人生總是這么不盡人意。沒(méi)辦法，只能繼續(xù)研究怎么實(shí)現(xiàn)分頁(yè)打印功能了。當(dāng)時(shí)首先想到的是在每一個(gè)要分頁(yè)的最后容器加到一定的高度，讓其充滿這個(gè)A4紙高度，那么接下來(lái)的內(nèi)容就會(huì)自動(dòng)到下一頁(yè)了。想像很美好，現(xiàn)實(shí)卻很殘忍，不盡人意。后來(lái)問(wèn)了同事，說(shuō)可以試一下css print屬性實(shí)現(xiàn)強(qiáng)制分頁(yè)，當(dāng)時(shí)就查看了css print屬性，看到文檔說(shuō)明的時(shí)候已經(jīng)看到了希望的曙光，在我按照文檔說(shuō)明使用的print屬性強(qiáng)制分頁(yè)的時(shí)候結(jié)果卻未能如愿以償。當(dāng)時(shí)已經(jīng)很郁悶了，怎么也想不通為什么就是不行，可是還是不想放棄，既然官方文檔說(shuō)了可以實(shí)現(xiàn)，網(wǎng)上也是一大片能夠?qū)崿F(xiàn)的講解，為什么我就沒(méi)能實(shí)現(xiàn)呢。不甘心，直到最后發(fā)現(xiàn)了未能實(shí)現(xiàn)的問(wèn)題所在，我當(dāng)時(shí)的情況是這樣的，外層有兩個(gè)div容器，要打印的內(nèi)容是我拼接的html，然后append外層容器中的，打印的時(shí)候css print屬性就不起任何作用了。所以以后想要 使用css print屬性實(shí)現(xiàn)強(qiáng)制分頁(yè)功能的時(shí)候一定要記得打印的內(nèi)容外層只有一個(gè)容器 。

css print屬性如下：

分頁(yè)實(shí)例（此處借用網(wǎng)上例子）：

<div><input type="button" value="打印" onclick="Print()" /></div>  <div id="page1">          <table width="100%"  border="0" cellpadding="0" cellspacing="0"  style="page-break-after:always" >          <tr><td>第一頁(yè)打印內(nèi)容</td></tr>          </table>  </div>  <div id="page2">          <table width="100%"  border="0" cellpadding="0" cellspacing="0" id="content" >          <tr><td>第二頁(yè)打印內(nèi)容</td></tr>          </table>  </div>  </body>  </html>  

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。