針對(duì)打印的css樣式控制(@media查詢)
場(chǎng)景描述：
在實(shí)際應(yīng)用程序中，往往瀏覽器看到的style和打印的是不同的勤庐， 瀏覽器看到的往往更豐富可能包括一些交互button卓箫，而打印需要，所以我們就會(huì)在打印的時(shí)候把多余的東西或隱藏掉或調(diào)整一些style。
@media print {
...
}
這樣里面的樣式就只會(huì)在打印的時(shí)候才會(huì)生效贤斜，不會(huì)影響瀏覽器的正常樣式顯示
javascript 接口
打開打印對(duì)話框打印當(dāng)前文檔.
window.print()
事件監(jiān)聽
beforeprint // 當(dāng)相關(guān)聯(lián)的文檔即將打印或預(yù)覽以進(jìn)行打印時(shí)，將觸發(fā)beforeprint事件。
afterprint // 在相關(guān)聯(lián)的文檔已開始打印或打印預(yù)覽已關(guān)閉之后, 觸發(fā) afterprint事件肥印。
// 事件調(diào)用addEventListener 監(jiān)聽
實(shí)際特殊需求
場(chǎng)景描述
在實(shí)際應(yīng)用中，有時(shí)候往往只想打印一個(gè)頁(yè)面中的某個(gè)部分绝葡，而不是整個(gè)文檔深碱。
例如：下圖，只想打印第二個(gè)table藏畅。這是單純調(diào)用window.print()就不符合要求
image.png
解決辦法1
利用@media print 隱藏掉多余的內(nèi)容
缺點(diǎn)： 對(duì)應(yīng)復(fù)雜的頁(yè)面敷硅，十分麻煩，難于維護(hù)愉阎， 所以不推薦
解決辦法2
利用ifrme 或者window.open 新開頁(yè)打印
推薦： 能實(shí)現(xiàn)各種打印需求绞蹦。 只需要或者對(duì)應(yīng)dom元素即可，還可以外層加入模板榜旦。具體實(shí)現(xiàn)移步到下面庫(kù)
demo
html-element-print
