css之分頁列印

這次給大家帶來css之分頁列印，css之分頁列印的注意事項有哪些，下面就是實戰案例，一起來看一下。

很久沒寫文章了，最近做了一個員工入職的項目，該系統有一個批量列印個人資訊的功能需求。因為之前也沒接觸過列印這方面的功能，就上網查了下，發現jquery有個列印功能的 API（PrintArea） ,關於這個api大家有興趣的可以自行查看相關知識，在此我就不詳細介紹了。當時我就採取了使用這個api去實現列印功能，當我用了這個api去實現實現功能時，發現確實可以呼叫瀏覽器的列印功能，不過列印的內容卻是空白的，沒有任何資訊。然後就上網查了下，去了jquery官網查看了這個api，大部分都說是之前是支援列印的，現在需要在源碼上加一句代碼，當時搞了好久沒搞明白就放棄了，不過我覺得應該是可行的，只是我功夫沒到家吧，感興趣的小夥伴倒是可以去嘗試一下，應該會有很大的收穫的。這個方案走不通了，就只能繼續探索其他的方案了。

正在這個比較著急的時刻，發現了 window.print() 方法，原來直接就可以利用window的方法就可以實現列印功能了。正在我欣喜若狂的時候，一片烏雲已悄悄來到了我的頭上，瞬間人生灰暗了。雖說可以實現列印功能，但是網頁批量列印的時候內容就會緊排到一起。哎，本以為可以完美解決這個問題的時候，誰曾想人生總是這麼不盡人意。沒辦法，只能繼續研究怎麼實現分頁列印功能了。當時首先想到的是在每一個要分頁的最後容器加到一定的高度，讓其充滿這個A4紙高度，那麼接下來的內容就會自動到下一頁了。想像很美好，現實卻很殘忍，不盡人意。後來問了同事，說可以試一下css print屬性實現強制分頁，當時就查看了css print屬性，看到文檔說明的時候已經看到了希望的曙光，在我按照文檔說明使用的print屬性強制分頁的時候結果卻未能如願以償。當時已經很鬱悶了，怎麼也想不通為什麼就是不行，可是還是不想放棄，既然官方文檔說了可以實現，網上也是一大片能夠實現的講解，為什麼我就沒能實現呢。不甘心，直到最後發現了未能實現的問題所在，我當時的情況是這樣的，外層有兩個p容器，要列印的內容是我拼接的html，然後append外層容器中的，列印的時候css print屬性就不起任何作用了。所以以後想要 使用css print屬性實現強制分頁功能的時候一定要記得列印的內容外層只有一個容器 。

css print屬性如下：

分頁執行個體（此處借用網上例子）：

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

CSS3混合模式使用詳解

H5中APP監聽返回事件處理