2008-10-10 16 views
8

Tarayıcıdan bir baskı (veya baskı önizleme) oluştuğunda belirli DIV'leri dinamik olarak gizlemeye çalışıyorum.Tarayıcı/çıktı önizleme için tarayıcının çıktısını nasıl özelleştirebilirim?

Kolayca iki stil sayfalarını normal diğeri baskı ortamı için bir alarak statik ayırt edebilir:

Ama baskı stil sayfası aktif hale geldiğinde bir adım daha ileri giderek dinamik bazı öğeleri gizlemek gerekir

Belirli ölçütlere dayanan bir yazdırma işlemi sırasında, bunu kolayca çözebilmenin bir yolu, yazdırma/yazdırma görünümünün işlenmesi için bir DOM olayını ele almak olacaktır, daha sonra ekranı değiştirmek için jQuery'yi kullanabilirdim: gizlenmesi gereken sınıfların hiçbiri ancak bir DOM yazdırma olayı bulamıyorum !!

Çözümün ne olduğunu bilen var mı?

+0

Kullanıcı sayfa yazdırdıktan (veya önizlemeleri yazdırdıktan) sonra div'leri gizlemeniz mi gerekiyor? –

cevap

1

IE'de onbeforeprint olay var. Diğer ana tarayıcılar tarafından desteklenmiyor gibi görünüyor. (Firefox 3.0.3 ve Safari 3.1.2'yi test ettim.)

5

Tüm tarayıcılar yazdırma olayını yakalamanıza izin vermiyor. Bu sayfayı 'bu sayfayı yazdır' bağlantısını ekleyerek ve ardından ihtiyacınız olanı gerçekleştirmek için bu tıklama etkinliğini kullanarak ele aldım.

.noprint { 
    display: none; 
} 

Eğer bilmiyorsanız

HTML

<div id='div19' class='noprint'> 
    ... 
</div> 

print.css:

4

Sadece baskı stil sayfalarına gizlenen bir sınıf olan DIV'leri etiketlemek önceden hangi öğeleri saklamanız gerektiğini, verilen obje için sınıfı ayarlamak için javascript'i kullanabilirsiniz. cts:

JavaScript

document.getElementById('div19').className='noprint'; 
5

Sana bir baskı olayı gerek olduğunu sanmıyorum. Tek yapmanız gereken, @media print stillerini Javascript (?) Kriterlerine göre ayarlamaktır. Kullanıcı sayfasını yazdırmak çalıştığında, @media print tarzı uygulanır ve stilleri geçerli olacağı:

<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> 

ne baskılar belirlemek için sunucu tarafı kriterler kullanılarak, o zaman sadece sunucu tarafı kod malzememiz var Sınıfları gerektiği gibi dekore etmek için @media print. Ayrıca, zaten @media print içinde mevcut bir sınıf değiştirmeyi veya innerHTML dışında bir şey kullanarak yeni CSS oluşturmayı düşünebilirsiniz, bu bana kokuyor, ama Opera 9.6, Windows 3.1 için Safari .2, IE 6 ve Firefox 2.0.0.17 (Başka tarayıcıları test etmedim).

İlgili konular