2016-08-05 206 views
0

我一直試圖從很長一段時間內完成這項工作。我有一個帶有少量圖標的HTML頁面,點擊打印後,我想要打印包括圖標在內的頁面。使用Window.print打印HTML頁面

我沒有按照該解決方案建議在Print specific div

但在這我不能加載的圖標,也是頁面格式進入瘋狂。關於如何在點擊時打印頁面的任何建議,而不必玩弄已經格式化/樣式化的頁面。

該應用程序有一個cshtml文件,其樣式,引用的圖標在我創建的每個html頁面中都不需要引用。所以當我打電話給window.print()樣式沒有加載爲我想要打印的具體div,不加載操作被調用的圖標。我的問題是,在這種情況下,爲整個應用程序定義了一次樣式,我該如何調用window.print()

回答

2
var win = window.open('','printwindow'); 
    win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" href="http://localhost:8080/fin/pcd/css/printlib.css" type="text/css" /><link rel="stylesheet" href="css/main.css" type="text/css" /></head><body>'); 
    win.document.write($("#"+divid+"key").html()); 
    win.document.write($("#"+divid2+"line").html()); 
    win.document.write('<div class="testPrint"></div><script>;</script></body></html>'); 
    win.print(); 

使用上面你可以打印特定的div和導入css,你可以在div上應用必要的樣式(包括你的圖標)。

一些更多的信息說:

檢查下面的工作實例鏈接,你會得到一些想法:https://plnkr.co/edit/f1JkCgYvI10rsdm5msmM?p=preview

注:如果background-color是考慮到頁面的CSS要打印的相關屬性僅在background graphics針對chrome啓用並且對於其他瀏覽器不需要時才起作用。

Check below image on how to enable background graphics in chrome: 

enter image description here

+0

這是一個非常大的應用程序和每個頁面沒有'head'或'title'或'body'。每個頁面都有一組'divs',樣式表在公共文件中聲明。這種方法仍然有效嗎? – Jilna

+0

offcourse想把頁面打印成html頁面,例如你可以寫瓦片或模板或東西,每次你只需要改變內容並明智地寫入CSS。 – SiddP

+0

您提供的解決方案並不能解決我一直面臨的問題。我有一個cshtml文件,其中所有的樣式已經定義,並提到在js文件中沒有拉我想要點擊時加載的樣式/圖標。 – Jilna