web端實現打印文檔

---

注：本文做爲我的記錄，原理在我的理解之上，與實際若有出入歡迎指教！*

實現核心

window.print();

ctrl + P 實際上也是執行這行代碼

效果原理

打印的效果其實是設置紙張大小的網頁可視區域的縮放。

值得注意的是 可視區域指body標籤內的可視圖像、若是其中div設置了overflow: auto等隱藏部分不會出如今打印頁面上，換句話說頁面滾動條是div產生的，僅打印顯示部分，滾動條是body產生的，頁面中全部元素會出如今打印界面，超出部分自動分頁。

分頁

能夠自動分頁的緣由是由於大多數dom元素都設置了一個css屬性page-break-after: auto;，若是想強制分頁只需在元素上設置page-break-after: always;，或者像這樣插入元素：

<div style="page-break-after: always"><span style="display: none">&nbsp;</span></div>

實際上，word文檔的分頁就是這個原理，word文檔的本質就是所見即所得的html。

控制打印效果（媒體查詢）

body{
    overflow: hidden;
}

@media print{
    body{
        overflow: auto;
    }
}

Sass嵌套寫法

body{
    overflow: hidden
    @media print{
        overflow: auto;
    }
}

媒體查詢所設置的樣式只會在window.print()執行時生效，且並不會影響頁面顯示，因此，根據這個特性，就能夠經過css設置，只打印需求打印的部分。