在通過瀏覽器實現打印各種單據的時候,如果一張A4可以打印完的話是不需要分頁功能的,但是很多情況下是需要分頁來保證打印的內容正確無誤的。
我們在打印一些表格的時候,這些表格通常都是用css標簽寫出來的表格,由于css沒有直接的屬性來實現打印分頁功能。但是我們可以通過一些技巧來實現這個功能。
常用的就是page-break屬性,有page-break-before和page-preak-after屬性來設置在哪個節點進行分頁。直接在節點部分加上css屬性就可以了。
.page-break-after {
page-break-after: always;
}最近的項目中我們也是有一個打印的頁面需要分頁功能,但是吧我寫頁面和測試打印功能的時候用的是谷歌瀏覽器,打印時候的分頁是正常的,于是就直接上線了,結果在客戶使用過程中發現了問題,他在使用默認瀏覽器和qq瀏覽器的時候,沒有分頁功能,導致打印的結果是錯版的。
在客戶給我反饋之后我就檢查了代碼,好像是沒有問題,但是我用qq瀏覽器測試的時候,確實是不生效沒有分頁。
于是我就各種測試和尋找解決方案,因為這類似的問題跟代碼就沒關系了就是規范的問題或者兼容性的問題,最后經過無數次的測試和尋找解決方案之后發現,如果該屬性的div或者table沒有內容的話,就會出現這種情況,有點無語的樣子。
最后的解決方式也很簡單,就是給空的div中間加上空格或者 ;占位就可以正常打印了。




