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

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

css print屬性如下：

分頁實例（此處借用網上例子）：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表