Tarayıcı yazdırma seçenekleri (üstbilgiler, altbilgiler, kenar boşlukları) sayfadan devre dışı bırakılsın mı?

182

Bu sorunun SO ve diğer birkaç web sitesinde birkaç farklı şekilde sorulduğunu gördüm, ancak bunların çoğu ya çok spesifik ya da güncel değil. Birisinin spekülasyona yol açmadan burada kesin bir cevap verebileceğini umuyorum.

CSS veya javascript ile, birisi tarayıcısında yazdırdığında varsayılan yazıcı ayarlarını değiştirmenin bir yolu var mı? Ve elbette "tarayıcılarından yazdırır" derken, PDF veya başka bir eklenti bağımlı mim türü değil, HTML biçimini kastediyorum.

Lütfen aklınızda bulundurun:

Bazı tarayıcılar bunu sunuyor ve diğerleri sunmuyorsa (veya yalnızca bazı tarayıcılar için nasıl yapacağınızı biliyorsanız) tarayıcıya özgü çözümleri memnuniyetle karşılıyoruz.

Benzer şekilde, bunu yapan HERHANGİ BİR'e karşı belirli kısıtlamaları olan genel bir tarayıcı biliyorsanız, bu da yararlıdır, ancak bazı oldukça güncel belgeler takdir edilecektir. (XYZ son üç yılda söz konusu politikada önemli değişiklikler yaptığında "bu XYZ'nin güvenlik politikasına aykırı" demek pek inandırıcı değildir).

Son olarak, "varsayılan yazdırma ayarlarını değiştir" dediğimde sonsuza kadar demek istemiyorum, sadece sayfam için ve özellikle yazdırma kenar boşluklarına, üstbilgilere ve altbilgilere değiniyorum.

CSS'nin sayfa yönünü ve sayfa kenar boşluklarını değiştirme seçeneği sunduğunu çok iyi biliyorum. Birçok mücadeleden biri Firefox ile. Sayfa kenar boşluklarını 1 inç olarak ayarlarsam, bunu zaten yerine koyduğu yarım inç'e ekler.

Müşterinin sitesinde PDF'lerin kullanımını azaltmak istiyorum, ancak sunum ihlali (güvenilirlik eksikliğinin yanı sıra) ana endişeleri.

javascript  html  css  browser  printing 
— Anthony
kaynak
Bunu yapmak istemenizin belirli bir nedeni var mı? Gereksinimi söylerseniz, belki de başka bir olası çözüm olabilir ... Benim için kullanıcı ayarlarını değiştirmek hoş bir çözüm gibi görünmüyor ...
— Nivas
1
Katılıyorum. Kullanıcı ayarlarını değiştirmek istemiyorum. Tarayıcının varsayılan ayarlarının üzerine yazmak istiyorum. Bunun nedeni, alternatifin, diğer her şeyin CSS yoluyla yazıcı dostu hale getirilebildiği durumlarda gereksiz görünen bir PDF kullanmak olmasıdır.
— Anthony
Cevabı çözüm olarak kontrol ettiğinizi görüyorum, ancak SADECE kromda çalışıyor. tarayıcılar arasında doğru bir çözüm bulabildiniz mi? veya en azından birkaç tarayıcıda mı? çünkü aynı sorunum var
— mavili
Çapraz tarama çözümü için @mavili bkz. stackoverflow.com/a/23778125/453605 .
— Marcello Nuccio

Yanıtlar:

200

CSS standardı bazı gelişmiş biçimlendirme sağlar. @pageCSS'de, yalnızca disk belleği olan ortamlara (kağıt gibi) uygulanan bazı biçimlendirmeleri etkinleştiren bir yönerge vardır . Bkz. Http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .

Dezavantajı, farklı tarayıcılardaki davranışların tutarlı olmamasıdır. Safari hala yazıcı sayfa kenar boşluğunun ayarlanmasını desteklememektedir, ancak diğer tüm büyük tarayıcılar artık bunu desteklemektedir.

@pageYönerge ile sayfanın yazıcı kenar boşluğunu belirleyebilirsiniz (bir HTML öğesinin normal CSS kenar boşluğu ile aynı değildir):

<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 initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

Üstbilgi ve altbilgiyi kaldırma efektini elde etmek için buradaki sayfaya özgü kenar boşluklarını devre dışı bıraktığımızı unutmayın, bu nedenle gövde üzerinde belirlediğimiz kenar boşluğu sayfa sonlarında kullanılmaz ( Konrad tarafından yorumlandığı gibi ) Bu, yalnızca işe yarayacağı anlamına gelir yazdırılan içerik yalnızca bir sayfa ise düzgün bir şekilde yerleştirilir.

Firefox 3.6 , IE 7 , Safari 5.1.7 veya Google Chrome 4.1'de çalışmaz .

@Page kenar boşluğunu ayarlamanın IE 8 , Opera 10 , Google Chrome 21 ve Firefox 19'da etkisi vardır .
Sayfa kenar boşlukları bu tarayıcılardaki içeriğiniz için doğru şekilde ayarlanmış olsa da, davranış üstbilgi / altbilginin gizlenmesini çözmeye çalışmak için ideal değildir.

Farklı tarayıcılarda şu şekilde davranır:

  • Gelen Internet Explorer , marj aslında bu baskı için ayarlarda 0mm olarak ayarlanır ve Önizleme yaparsanız varsayılan olarak 0mm alacak ancak kullanıcı önizleme değiştirebilirsiniz.
    Sayfa içeriğinin gerçekten doğru yerleştirildiğini göreceksiniz , ancak tarayıcı yazdırma üstbilgisi ve altbilgisi saydam olmayan bir arka planla gösteriliyor ve sayfa içeriğini o konumda etkili bir şekilde gizliyor.

  • In Firefox yeni sürümlerinde, bu edilmektedir konumlandırılmış doğru, ama bu kötü bir tarayıcı başlığı metnin karması ve sayfa içeriği benziyor böylece üst bilgi / alt metin ve içerik yazı hem görüntülenir.

  • In Opera , sayfa içeriği derileri başlık standart css ve içeriği ile üstbilgi / altbilgi pozisyon çatışmalarda olmayan şeffaf bir arka plan kullanırken. Oldukça iyi, ancak kenar boşluğunun başlığın kısmen görünür olmasına neden olan küçük bir değere ayarlanması garip görünüyor. Ayrıca sayfa kenar boşluğu düzgün ayarlanmamış.

  • In Krom yeni sürümlerinde, tarayıcı başlık ve altbilgi @page marjı kadar küçük ayarlanırsa gizli içerikle üst bilgi / alt pozisyon çatışmaları söyledi. Edilmektedir Bence, bu tam olarak böyle davranmalı.

Sonuç olarak Chrome , üstbilgi / altbilgiyi gizleme konusunda bunun en iyi uygulamasına sahiptir.

— huşu
kaynak
1
Açıklığa kavuşturmak için, üstbilgi / altbilginin yer kaplamamasına neden olduğundan şüphelendiğim halde, Firefox 21 veya IE10 ile üstbilgileri kaldırmıyor gibi görünüyor. Chrome 28 ile çalışır.
— amh15
2
Daha yeni tarayıcı sürümlerini yansıtacak şekilde güncellendi. Chrome şimdi bunun en iyi uygulamasına sahip.
— huşu
@SearchForKnowledge: Evet, söylediğim gibi - cevabımı IE'de nasıl davrandığının açıklaması altında okursanız: "Sayfa içeriğinin gerçekten doğru konumlandırıldığını göreceksiniz, ancak tarayıcı yazdırma üstbilgisi ve altbilgisi sayfayı gizliyor içerik bu konumda. " IE 8'de "etkisi var" diyorum, istediğimiz gibi çalışmıyor ... Bunu daha net hale getirmek için cevabımı düzenleyeceğim.
— korku
Üstbilgileri, aynı zamanda sol kenar boşluğunu da kaldırır. Şimdi tüm metinlerim sayfanın kenarında.
— Mittchel
7
Bu çözüm sadece işi değil hiç çünkü @pagemarjları ve bodymarjlar temelde farklı şeylerdir: bodymarjı için geçerlidir tüm vücut yani birinci sayfanın üst ve son sayfanın altına. Tüm ara sayfalar için üst / alt kısımda sıfır kenar boşluğu kalır.
— Konrad Rudolph
86

Chrome ve Opera'nın yeni sürümlerinin yanı sıra Firefox 48 alpha 1 ve üstü

Sayfa kenar boşluğunu, bunu devre dışı bırakmak için metni içeremeyecek kadar küçük bir boyuta ayarlayabilirsiniz ( huşu cevabından ödünç alma ):

@page {
  size: auto;  /* auto is the initial value */
  margin: 0mm; /* this affects the margin in the printer settings */
}
html {
  background-color: #FFFFFF;
  margin: 0px; /* this affects the margin on the HTML before sending to printer */
}
body {
  border: solid 1px blue;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}
<ol>
  <li>
    <a href="data:,No Javascript :-(" target="_blank">Middle-click to open in new tab</a>
  </li>
  <li>
    <a href="javascript:print()">Print</a>
  </li>
</ol><!-- Hack to work around stack snippet restrictions --><script type=application/javascript>document.links[0].href="data:text/html;charset=utf-8,"+encodeURIComponent('<!doctype html>'+document.documentElement.outerHTML)</script>
Snippet'i genişlet

48 alfa kadar Firefox sürümleri için 1

URL'nin, sayfa numaralarının ve Firefox'un sayfa kenar boşluğuna eklediği diğer şeylerin yazdırılmasını önlemek mozNoMarginBoxesiçin <html>etikete bir özellik ekleyebilirsiniz .

Firefox 29 ve sonrasında çalışıyor. Farkın ekran resmini burada görebilir veya canlı bir örnek için buraya bakabilirsiniz .

Not mozDisallowSelectionPrintörnekte nitelik olduğu değil sınırlarından metni kaldırmak için gerekli; bkz . PDF.js'deki mozdisallowselectionprint özelliği ne yapıyor? .

Diğer tarayıcılar

Ne yazık ki, Internet Explorer'da bu sorunu çözmenin bir yolu yok gibi görünüyor, bu nedenle PDF'ye başvurmanız veya kullanıcılardan kenar boşluğu metinlerini devre dışı bırakmalarını istemeniz gerekir.

Aynı şey Safari için de geçerli; @Luiz Perez'in bir yorumuna göre , Safari'nin en yeni sürümleri (8, 9.1 ve 10) @pagekenar boşluğu metinlerini bastırmayı desteklemiyor .

Edge'de hiçbir şey bulamıyorum ve test edilecek bir Windows 10 kurulumum yok.

— user2428118
kaynak
5
dürüst olmak gerekirse, ben buna katılıyorum. "Sistem iletişim kutusu" nu kullanarak yazdırırsanız Chrome'da bile çalışır. sadece <!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint>ayarlandığından emin olun . Kaynak:https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383
— Peter
3
Firefox'ta harika çalışıyor. Bu yüzden, @page{ size: auto; margin: 3mm; } krom ve safari'yi desteklemek için benim için çapraz tarayıcı çözümü yaptı.
— Clain Dsilva
Bu çözüm, FF'deki basılı malzemelerdeki istenmeyen bilgileri / içeriği kaldırmak için gerçekten iyi çalışır. Teşekkürler!
— Varvara Jones
Bu harika, ama IE ne olacak?
— Santosh
1
Bu snippet'i Safari 8, 9.1 ve 10'da test ettim ve Safari'nin bu sürümlerindeki üstbilgi veya altbilgiyi kaldırmaz.
— Luis Perez
21

@Awe'nin yukarıda söylediği gibi, Chrome'da çalıştığı onaylanan çözüm budur !!

Bunun kafa etiketlerinin İÇİNDE olduğundan emin olun:

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

    body 
    {
        background-color:#FFFFFF; 
        border: solid 1px black ;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }
</style>
</head>
— İşler
kaynak
3
Bu çok iyi bir çözüm! Kenar boşluklarını kaldırır, üstbilgi ve altbilgiyi kaldırır. Tek değişiklikim, daha sonra padding: 0.25in 0.5in;güzel, temiz bir baskı için ihtiyacım olan kesin kenar boşluklarına sahip olmak için vücut stillerine eklemekti . Chrome v25'te çalışıyor ve neyse ki bu özel proje için son kullanıcılardan birkaç modern tarayıcıdan seçim yapmalarını isteyebiliriz.
— Charlie Schliesser
2
Ne yazık ki bu çok sayfalı çıktılarda sorunlara neden oluyor. Sayfanın altındaki metin kırpılır.
— Jonathan
Tek sayfa çıktı ile Chrome 67.0.3396.99 ve Firefox 62.0b5'te mükemmel çalışır.
— killscreen
16

Üstbilgi, sayfa numaraları ve html altbilgisi kaldırılmasını isteyen bir istemciden benzer bir istek var. Bu durumda, istemci resmi bir sertifika olarak ikiye katlanabilecek bir HTML sayfası sunar. Eklenen URL, sayfa ve başlık alakasızdır ve hoş olmayandan daha az bir nihai ürüne yol açar. Bazı yönlerden, sadece ucuz görünüyor.

Media = Print bu tarayıcı varsayılanlarını devre dışı bırakamadı. Tek geçici çözüm, kullanıcıya "Dişli" düğmesini tıklamasını ve bu öğeleri açıp kapatmasını söylemektir. Cidden, bunu 20 yıl boyunca yapabileceğim hakkında hiçbir fikrim yoktu (ve tipik kullanıcının geçiş düğmesine tıklamak için bir ipucu olacağını düşünüyoruz?).

CSS, Medya = Yazdır özelliğini destekliyorsa, tüm son kullanıcı yazdırma deneyimini denetleme özelliğini desteklemelidir. Tarayıcıların eklenen alanları sağladığını takdir ediyorum, ancak neden CSS'nin genel baskı deneyimini kontrol etmesine izin vermiyorsunuz? % 90'lık bir çözüm, üç alan daha ile% 100 olabilir! Basit:

#BrowserPrintDefaults{display:none}

yeterli olur.

Yine, son kullanıcının yazdırmak isteyip istememesi önemli değildir (belki müşteriniz çok özeldir ve basılı URL'lerin etrafında dolaşmasını istemez. Ya da bir yönetim ekibi özel bir işbirliği sitesi kullanıyor olabilir mi?). Son kullanıcıyı savunmaktan memnunum, ancak birisi cevap arıyorsa, son kullanıcının gösterme veya gizleme hakkı olduğunu söyleyerek yanıt vermeyin. Bazen müşterinin faturaları ödemesi hakkı vardır.

— CAL
kaynak
Sonunda istemediğim kadar vazgeçtim. Tüm tarayıcıların bu ayarlara sahip olması ve bir sunum öğesi olması nedeniyle bunun CSS'de gösterilmesi gerektiğini kesinlikle kabul ediyorum. Ancak bunun yerine bu, çerezlerin kapatılması gibi uygulama düzeyinde bir tercih olarak sahnedir.
— Anthony
1
@PageYazıcı kenar boşluğunu ayarlamak için yönergeyi kullanan resmi bir CSS standardıdır (html sayfasının gövde kenar boşluğu ile aynı değildir). Şu anda bu, Safari dışındaki tüm büyük tarayıcılar tarafından desteklenmektedir, ancak üstbilgi / altbilgiyi nasıl etkilediği değişmektedir. En iyi uygulamalar Opera ve Chrome'da.
— awe
6

Bu kodu deneyin, benim için% 100 çalışıyor:
FOR Landscape:

<head>
<style type="text/css">

@page{
  size: auto A4 landscape;
  margin: 3mm;
}

</style>
</head>

Portait İÇİN :

<head>
<style type="text/css">

@page{
  size: auto;
  margin: 3mm;
}

</style>
</head>
— Iyes oğlan
kaynak
1
CSS sayfa kuralları kenar boşluklarını belirler, ancak tarayıcı tarafından yerleştirilen yerleşik üstbilgi ve altbilgiyi kaldırmaz (sayfa URL'si, sayfa numarası vb.)
— Anthony
0

"Tarayıcılarında" ve firefox'tan bahsettiğinizden, Internet Explorer kullanıyorsanız, kayıt defterindeki değeri geçici olarak ayarlayarak sayfa üstbilgisini / altbilgisini devre dışı bırakabilirsiniz, bir örnek için buraya bakın . AFAIK Bunu diğer tarayıcılarda yapmanın bir yolunu duymadım. Hem Daniel'in hem de Mickel'in cevapları birbiriyle çarpışıyor gibi görünüyor, sanırım firefox'un üstbilgileri / altbilgileri kaldırması veya özelleştirmesi için kayıt defterinde bir yerde benzer bir ayar olabilir. Kontrol ettin mi?

Umarım bu yardımcı olur ve iyi tatiller, Saygılarımla, Tom.

— t0mm13b
kaynak
1
IE7 + 'da, Baskı Önizleme'de basit bir düğmeyi tıklayarak üstbilgi / altbilgiyi devre dışı bırakabilirsiniz. Kayıt defterinde yapmaya gerek yok!
— huşu
0

@sayfa marjı: 0mm artık Firefox 19.0a2'de (2012-12-07) çalışıyor.

— thinsoldier
kaynak
0

Web sayfasına bazı css kullanarak sorunumu çözdüm.

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>
— Kabir Hossain
kaynak
0

Bu benim için yaklaşık 1 cm'lik bir marjla çalıştı

@page 
{
    size:  auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}
html
{
    background-color: #FFFFFF; 
    margin: 0mm;  /* this affects the margin on the html before sending to printer */
}
body
{
    padding:30px; /* margin you want for the content */
}
— afshin
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.