Web sayfasını yazdırmak için web sayfamda bir link var. Ancak bağlantı, çıktının kendisinde de görülebilir.
Yazdır bağlantısını tıkladığımda bağlantı düğmesini gizleyecek javascript veya HTML kodu var mı?
Misal:
"Good Evening"
Print (click Here To Print)"İyi akşamlar" metnini yazdırdığında bu "Yazdır" etiketini gizlemek istiyorum. "Yazdır" etiketi çıktıda görünmemelidir.
Yanıtlar:
Stil sayfanıza şunları ekleyin:
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}Ardından class='no-print', basılı sürümde görünmesini istemediğiniz, örneğin düğmeniz gibi HTML'nize yazdırılamayan sınıfı ekleyin (veya mevcut bir sınıf ifadesine ekleyin).
@media print { .no-print, .no-print * { display: none !important; } }
<link rel="stylesheet" href="all.css" media="screen, print" type="text/css">
@media screenekran stillerini tanımlamak istiyorsanız gerekir , ancak burada durum böyle değildir: Varsayılan olarak tüm öğeler görüntülenir ve öğeyi gizleyen yalnızca yazdırılabilir bir stil tanımlayarak, ekranda hala görünmesini sağlamak için mükemmeldir .
Bootstrap 3 bunun için kendi sınıfına sahiptir :
hidden-printŞöyle tanımlanır:
@media print {
.hidden-print {
display: none !important;
}
}Kendi başınıza tanımlamanız gerekmez.
In Bootstrap 4 Buna değişti:
.d-print-none! importantbeni kurtardı.
En iyi uygulama, özellikle yazdırma için bir stil sayfası kullanmak ve medianiteliğini olarak ayarlamaktır print.
İçinde, kağıda yazdırılmasını istediğiniz öğeleri gösterin / gizleyin.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />İşte bu CSS koymak basit bir çözüm
@media print{
.noprint{
display:none;
}
}ve işte HTML
<div class="noprint">
element that need to be hidden when printing
</div>
<div class="noprint">
element that need to be hidden when printing
</div>CSS DOSYASI
@media print
{
#pager,
form,
.no-print
{
display: none !important;
height: 0;
}
.no-print, .no-print *{
display: none !important;
height: 0;
}
}HTML BAŞLIĞI
<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >ELEMAN
<div class="no-print"></div>Bağlantıyı bir div içine yerleştirebilir, ardından tıklandığında div'i gizlemek için bağlantı etiketinde JavaScript kullanabilirsiniz. Örnek (test edilmedi, ince ayar yapılması gerekebilir, ancak fikri anlarsınız):
<div id="printOption">
<a href="javascript:void();"
onclick="document.getElementById('printOption').style.visibility = 'hidden';
document.print();
return true;">
Print
</a>
</div>Dezavantajı, bir kez tıklandığında, düğmenin kaybolması ve sayfadaki bu seçeneği kaybetmesidir (her zaman Ctrl + P vardır).
Daha iyi bir çözüm, bir yazdırma stil sayfası oluşturmak ve bu stil sayfası içinde printOptionkimliğin gizli durumunu (veya ne adlandırırsanız) belirtmektir. Bunu HTML'nin kafa bölümünde yapabilir ve medya özelliğine sahip ikinci bir stil sayfası belirtebilirsiniz.
Yapılacak en iyi şey sayfanın "salt baskı" sürümünü oluşturmaktır.
Oh, bekle ... artık 1999 değil. "Display: none" ile bir baskı CSS kullanın.
@media print {
.no-print {
visibility: hidden;
}
}<div class="no-print">
Nope
</div>
<div>
Yup
</div>Diodus'un kabul ettiği cevap, hepimiz olmasa da bazıları için çalışmıyor. Yine de bu düğmeyi kağıda gitmekten gizleyemedim.
Clint Pachl tarafından css dosyasını çağırarak küçük ayarlama
media="screen, print" ve sadece
media="screen"bu sorunu çözüyor. Açıklık ve böylece Clint Pachl yorumlarda gizli ek yardım görmek kolay değildir. Kullanıcı css dosyasına ", print" yazmasını istenilen formatta eklemelidir.
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">ve varsayılan medya = "ekran" değil.
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">Bence bu sorunu herkes için çözüyor.
Tek tek öğelerin style özelliğine müdahale eden Javascript varsa, bu nedenle geçersiz kılınır !important, olayları onbeforeprintve işlemeyi öneririm onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint
@mediabaskı ve@mediaekran. Yazdır bölümünde, yazdırma için stillerinizi yerleştirirsiniz. Ekran ekranı bölümünde, ekran baskısı için stillerinizi yerleştirirsiniz. Farklı çözünürlükler için birden fazla ekran bölümünüz bile olabilir. Temel olarak sadece bu cevapta verilenleri eklerseniz, işe yaramaz. İnanın denedim. Peki bu nasıl 69 oy aldı?