在通過瀏覽器實(shí)現(xiàn)打印各種單據(jù)的時(shí)候，如果一張A4可以打印完的話是不需要分頁功能的，但是很多情況下是需要分頁來保證打印的內(nèi)容正確無誤的。

我們在打印一些表格的時(shí)候，這些表格通常都是用css標(biāo)簽寫出來的表格，由于css沒有直接的屬性來實(shí)現(xiàn)打印分頁功能。但是我們可以通過一些技巧來實(shí)現(xiàn)這個(gè)功能。

常用的就是page-break屬性，有page-break-before和page-preak-after屬性來設(shè)置在哪個(gè)節(jié)點(diǎn)進(jìn)行分頁。直接在節(jié)點(diǎn)部分加上css屬性就可以了。

.page-break-after {
  page-break-after: always;
}

最近的項(xiàng)目中我們也是有一個(gè)打印的頁面需要分頁功能，但是吧我寫頁面和測試打印功能的時(shí)候用的是谷歌瀏覽器，打印時(shí)候的分頁是正常的，于是就直接上線了，結(jié)果在客戶使用過程中發(fā)現(xiàn)了問題，他在使用默認(rèn)瀏覽器和qq瀏覽器的時(shí)候，沒有分頁功能，導(dǎo)致打印的結(jié)果是錯版的。

在客戶給我反饋之后我就檢查了代碼，好像是沒有問題，但是我用qq瀏覽器測試的時(shí)候，確實(shí)是不生效沒有分頁。

于是我就各種測試和尋找解決方案，因?yàn)檫@類似的問題跟代碼就沒關(guān)系了就是規(guī)范的問題或者兼容性的問題，最后經(jīng)過無數(shù)次的測試和尋找解決方案之后發(fā)現(xiàn)，如果該屬性的div或者table沒有內(nèi)容的話，就會出現(xiàn)這種情況，有點(diǎn)無語的樣子。

最后的解決方式也很簡單，就是給空的div中間加上空格或者&nbsp；占位就可以正常打印了。