我試圖從瀏覽器中打印(或打印預覽)時動態地隱藏某些DIV。如何自定義打印/打印預覽的瀏覽器輸出?
我可以很容易地由具有兩個樣式表,一個用於正常和一個用於打印介質靜態區分:
但我需要走一步,並動態隱藏一些元件時,打印樣式表變爲有效在基於特定標準的打印期間
一種方法可以輕鬆地解決它將處理一個DOM事件來處理print/printview,然後我可以使用jQuery來更改顯示:無需隱藏的類需要隱藏,但我找不到DOM打印事件!
任何人都知道解決方案是什麼?
我試圖從瀏覽器中打印(或打印預覽)時動態地隱藏某些DIV。如何自定義打印/打印預覽的瀏覽器輸出?
我可以很容易地由具有兩個樣式表,一個用於正常和一個用於打印介質靜態區分:
但我需要走一步,並動態隱藏一些元件時,打印樣式表變爲有效在基於特定標準的打印期間
一種方法可以輕鬆地解決它將處理一個DOM事件來處理print/printview,然後我可以使用jQuery來更改顯示:無需隱藏的類需要隱藏,但我找不到DOM打印事件!
任何人都知道解決方案是什麼?
在IE中有一個onbeforeprint事件。它似乎沒有被其他主流瀏覽器支持。 (我測試了Firefox 3.0.3和Safari 3.1.2。)
並非所有瀏覽器都允許您捕獲打印事件。我已經看到了通過添加「打印此頁」鏈接,然後使用該單擊事件來完成您所需的工作。
只是標記這些div與是隱藏在打印樣式表類:
HTML
<div id='div19' class='noprint'>
...
</div>
print.css
.noprint {
display: none;
}
如果你不知道提前需要隱藏哪些元素,可以使用javascript爲給定對象設置類CTS:
的Javascript
document.getElementById('div19').className='noprint';
我不認爲你需要打印的事件。您只需根據您的Javascript(?)標準調整@media print
樣式即可。當用戶試圖打印頁面時,@media print
風格將應用和你的風格將會生效:
<html>
<head>
<style id="styles" type="text/css">
@media print { .noprint { display:none; } }
</style>
<script type="text/javascript">
var x = Math.random();
if (x > .5) {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '@media print { .maybe_noprint { display:none; } }';
document.getElementsByTagName('head')[0].appendChild(style);
}
</script>
</head>
<body>
<div class="noprint">This will never print.</div>
<span class="maybe_noprint">This may print depending on the value of x.</span>
</body>
</html>
如果您正在使用服務器端的標準,以確定哪些打印,然後只需要服務器端代碼吐根據需要輸出@media print
以裝飾類。此外,您可能需要考慮修改已在@media print
之內的現有類,或者使用innerHTML
以外的其他類型構建新的CSS,但我會承認它對我來說味道很糟糕,但似乎適用於Opera 9.6,Safari 3.1 for Windows 3.1 .2,IE 6和Firefox 2.0.0.17(我沒有測試任何其他瀏覽器)。
你的意思是你需要在用戶打印(或打印預覽)頁面後隱藏屏幕上的div? – 2008-10-10 12:19:43