Üstbilgi ve altbilgiyi window.print () 'den kaldır

109

Sayfayı yazdırmak için window.print () kullanıyorum, ancak üstbilgi ve altbilgi sayfa başlığı, dosya yolu, sayfa numarası ve tarihi içeriyor. Onları nasıl kaldırabilirim?

Baskı stil sayfasını da denedim.

#header, #nav, .noprint
{
display: none;
}

Lütfen yardım et. Teşekkürler.

css printing

— Viralk
kaynak

7

Bu öğeler, kullanıcının tarayıcı ayarlarına özeldir. Bunları CSS veya JavaScript aracılığıyla kaldırabileceğinizi sanmıyorum.

— Michael Berkowski

Bu sorunun açıklığa kavuşturulması gerektiğini düşünüyorum: Ekranda görüntülenen HTML'nin üstbilgi ve altbilgi öğelerini kaldırmaya mı çalışıyorsunuz yoksa yazdırma işlevi tarafından eklenen üstbilgi ve altbilgileri ortadan kaldırmak mı istiyorsunuz?

— AlanObject

149

Chrome'da bu otomatik üstbilgi / altbilgiyi kullanarak gizlemek mümkündür.

@page { margin: 0; }

İçerik, sayfanın sınırlarını aşacağından, sayfa yazdırma üstbilgisi / altbilgisi olmayacaktır. Elbette, bu durumda, içerik öğenizin sayfanın kenarına kadar uzanmaması için gövde öğenizde bazı kenar boşlukları / dolgular ayarlamalısınız. Yaygın yazıcılar kenar boşluksuz baskı alamadığından ve muhtemelen istediğiniz şey bu olmadığından, şuna benzer bir şey kullanmalısınız:

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

Martin'in bir yorumda belirttiği gibi , sayfanın bir sayfayı (büyük bir tablo gibi) geçen uzun bir öğesi varsa, kenar boşluğu yok sayılır ve basılı sürüm tuhaf görünür.

Bu cevabın orijinalinde (Mayıs 2013), yalnızca Chrome'da çalışıyordu, şimdi emin değildi ve bir daha denemek zorunda kalmadı. Engelleyemeyen bir tarayıcı için desteğe ihtiyacınız varsa, anında bir PDF oluşturabilir ve bunu yazdırabilirsiniz (üzerine JavaScript yerleştirerek kendi kendine yazdırılan bir PDF oluşturabilirsiniz), ancak bu büyük bir güçlüktür.

— diego nunes
kaynak

2

Nedense, body { margin: 1.6cm; }benim için doğru marjı görmezden geliyordu (belki de kullandığım için text-align:right), bunun yerine <div class="container">içeriğim için bir oluşturdum ve .container { margin: 1.6cm; }onun yerine kullandım .

— rybo111

8

Bunu Chrome 33 ile deniyorum. Harika çalışıyor, ancak dikkatli olun, çünkü body { margin: 1.6cm; }- tüm belge için bir kenar boşluğu olduğu için - ilk ve son hariç çok sayfalı belgelerin dikey kenar boşluklarına saygı göstermeyecek. Maalesef bir çözüm düşünemiyorum.

— pau.moreno

Hey @Diego, önerinizden memnunum ve üstbilgi altbilgim kaldırıldı ancak yazdırılan sayfam arttı. "gövde {kenar boşluğu: 1,6 cm;}" 1,6 cm'yi 1,0 cm olarak değiştirin ve işe yarıyor .. :) Mutlu kodlama

— Vishal Kiri

3

Burada daha kapsamlı bir cevap var: stackoverflow.com/questions/1960939/…

— jedison

Sayfa kenar boşluğunu kaldırmak ve gövde kenar boşluğu eklemek benim için boş bir sayfa oluşturuyordu. Gövde kenar boşluğunu dolgu olarak değiştirdim ve işe yaradı.

— André Guimarães Sakata

21

Bu kodu css dosyanıza eklemenin sorunu çözeceğinden eminim

<style type="text/css" media="print">
    @page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }
</style>

Bununla ilgili daha fazla bilgi edinmek için burayı ziyaret edebilirsiniz

— Rudias
kaynak

4

Hayır. Çalışmıyor. Bu, marjı belirliyor. Hala üstbilgi ve altbilgide url ve tarih saati görüntülüyor

— Öğrenci

Chrome ve Firefox için çalışıyor, ancak IE 11 için geçerli değil.

— Sammi

21

Firefox:

İçinde moznomarginboxesözellik ekle<html>

Misal :

<html moznomarginboxes mozdisallowselectionprint>

— l2aelba
kaynak

6

Firefox 48 yayınlandıktan sonra (Ağustos 2016) bu artık çalışmayacak: bugzilla.mozilla.org/show_bug.cgi?id=1260480

— Aljullu

benim için çalışmıyor, FF 61, ama @page {margin: 0; } çözümü FF'de de işe yarıyor gibi görünüyor.

— Kiko

11

Bugün meslektaşım aynı konuya rastladı.

"Margin: 0" çözümü krom tabanlı tarayıcılar için çalıştığından, Internet Explorer @page marjları sıfır olarak ayarlansa bile altbilgi yazdırmaya devam eder.

Çözüm (daha çok bir hack) @sayfaya negatif bir marj koymaktı.

@page {margin:0 -6cm}
html {margin:0 6cm}

Negatif kenar boşluğunun Y ekseni için çalışmayacağını, yalnızca X için çalışacağını lütfen unutmayın.

Umarım yardımcı olur.

— Nick Panov
kaynak

8

CSS standardı, bazı gelişmiş biçimlendirmeleri etkinleştirir. CSS'de, yalnızca sayfalı medyaya (kağıt gibi) uygulanan bazı biçimlendirmeleri etkinleştiren bir @page yönergesi vardır. Bkz. Http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
        @page 
        {
            size: auto;   /* auto is the current printer page size */
            margin: 0mm;  /* this affects the margin in the printer settings */
        }

        body 
        {
            background-color:#FFFFFF; 
            border: solid 1px black ;
            margin: 0px;  /* the margin on the content before printing */
       }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

Snippet'i genişlet

ve firefox için kullanın

Firefox'ta, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (sayfa kaynağını görüntüle :: etiket HTML).

Kodunuzda <html>şununla değiştirin:<html moznomarginboxes mozdisallowselectionprint>.

— Hossein Ghaem
kaynak

4

@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}

— Sheak Abdulla
kaynak

Bunu yapmanın doğru yolu bu gibi görünüyor. Benim durumumda bir iframe bağlamında bile harika çalışıyor.

— TwystO

2

Bu, en basit çözüm olacak. İnternetteki çözümlerin çoğunu denedim ama sadece bu bana yardımcı oldu.

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}

— Yasitha
kaynak

11

Bu hiçbir şey yapmaz.

— Gece

1

@page { margin: 0; }Chrome ve Firefox'ta iyi çalışıyor. IE'yi css aracılığıyla düzeltmenin bir yolunu bulamadım. Ancak, kendi makinenizde IE'de Sayfa Ayarına gidebilir ve kenar boşluklarını 0'a ayarlayabilirsiniz. Alt tuşuna ve ardından sol üst köşedeki dosya menüsüne bastığınızda Sayfa Yapısını bulacaksınız. Bu, her seferinde yalnızca bir makine için işe yarar ...

— Sammi
kaynak

0

1. Chrome ve IE için

<script language="javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.getElementById('header').style.display = 'none';
document.getElementById('footer').style.display = 'none';
document.body.innerHTML = printContents;

window.print();


document.body.innerHTML = originalContents;
}

</script>
<div id="div_print">
<div id="header" style="background-color:White;"></div>
<div id="footer" style="background-color:White;"></div>
</div>

FireFox için l2aelba'nın dediği gibi ,

Örnekte moznomarginboxes özniteliğini ekleyin:

<html moznomarginboxes mozdisallowselectionprint>

— Nikhilus
kaynak

Yukarıdaki kodda <div id = "header" style = "background-color: White;"> </div> <div id = "footer" style = "background-color: White;"> </div> isteğe bağlıdır .

— Nikhilus

0

Manuel olarak yazdırdığım bir html sayfasının üst ve alt bilgisini kaldırmaya çalışıyordum.

Bu sayfadaki hiçbir çözüm benim için işe yaramadı, ancak burada açıklandığı gibi kendi altbilgimi tanımlayarak Firefox kendi üstbilgisini ve altbilgisini eklemedi.

Bu maalesef Chrome'da çalışmıyor.

CSS'de:

@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}

Bunu HTML'nize ekleyin:

<div class="divFooter">
<p>UNCLASSIFIED</p>
</div>
``

— Iwinkler
kaynak

-1

Bu noktaya inerseniz, Firefox için bir çözüm buldum. Altbilgi ve üstbilgiler olmadan belirli bir div'deki içeriği yazdırır. Dilediğiniz gibi özelleştirebilirsiniz.

İlk olarak, bu eklentiyi indirin ve kurun: JSPrintSetup .

İkinci olarak, bu işlevi yazın:

<script>
function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');
    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write(elem);
    mywindow.document.write('</body></html>');
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

   //jsPrintSetup.setPrinter('PDFCreator'); //set the printer if you wish
   jsPrintSetup.setSilentPrint(1);

   //sent empty page header
   jsPrintSetup.setOption('headerStrLeft', '');
   jsPrintSetup.setOption('headerStrCenter', '');
   jsPrintSetup.setOption('headerStrRight', '');

   // set empty page footer
   jsPrintSetup.setOption('footerStrLeft', '');
   jsPrintSetup.setOption('footerStrCenter', '');
   jsPrintSetup.setOption('footerStrRight', '');

   // print my window silently. 
   jsPrintSetup.printWindow(mywindow);
   jsPrintSetup.setSilentPrint(1); //change to 0 if you want print dialog

    mywindow.close();

    return true;
}
</script>

Üçüncüsü, kodunuzda, baskı kodunu nereye yazmak isterseniz bunu yapın (JQuery kullandım. Düz javascript kullanabilirsiniz):

<script>
$("#print").click(function () {
    var contents = $("#yourDivToPrint").html();
    PrintElem(contents);
})
</script>

Açıkçası, tıklamak için bağlantıya ihtiyacınız var:

<a href="#" id="print">Print my Div</a>

Ve div'iniz yazdırılacak:

<div id="yourDivToPrint">....</div>

— Josiah
kaynak

-3

herhangi bir kod yazmanıza gerek yok. window.print () öğesini çağırmadan hemen önce ilk kez tarayıcınızın yazdırma ayarlarını değiştirin. örneğin firefox'ta:

Menü çubuğunu görmek için Alt veya F10 tuşuna basın
Dosya'ya ve ardından Sayfa Yapısına tıklayın
Kenar Boşlukları ve Üstbilgi / Altbilgiler sekmesini seçin
URL'yi boş için değiştirin -> resim

ve IE için bir başka örnek (önceki sürümler için IE 11 kullanıyorum, bu Firefox veya Internet Explorer'ın URL'yi Her Sayfada Yazdırmasını Engelle'yi görebilirsiniz ):

Menü çubuğunu görmek için Alt veya F10 tuşuna basın
Dosya'ya ve ardından Sayfa Yapısına tıklayın
Üstbilgi ve Altbilgi bölümünde URL'yi boş olarak değiştirin.

— alireza azami
kaynak

Bu bağlantı soruyu cevaplayabilirken, cevabın temel kısımlarını buraya eklemek ve referans için bağlantıyı sağlamak daha iyidir. Bağlantılı sayfa değişirse, yalnızca bağlantı yanıtları geçersiz hale gelebilir. - Yorumdan

— SurvivalMachine

SurvivalMachine öneriniz için teşekkürler. Cevabımı birkaç dakika önce düzenledim :)

— alireza azami

Hmmm ... Bu tek uygulamayı hesaba katmak için tüm kullanıcılarımın etrafında dolaşmak ve tarayıcılarını (ne kadar çok kullanıyorlarsa) güncellemekten hoşlanmıyorum, özellikle de gezegenin diğer tarafında yaşıyorlarsa. Ayrıca, başka bir uygulamanın ayarlarına tekrar ihtiyaç duyarlarsa ne olur? Bu bir cevap değil.

— Paul

Bu yaklaşım, sayfaya / uygulamaya eklenen bir özelliğin sağlayacağı tarayıcılar arası işlevsellikten yoksundur.

— 2018