Wyłączyć opcje drukowania w przeglądarce (nagłówki, stopki, marginesy) ze strony?

182

Widziałem to pytanie zadawane na kilka różnych sposobów na stronie SO i kilku innych stronach internetowych, ale większość z nich jest albo zbyt specyficzna, albo nieaktualna. Mam nadzieję, że ktoś może tu udzielić ostatecznej odpowiedzi bez zagubienia się w spekulacjach.

Czy istnieje sposób, za pomocą CSS lub javascript, aby zmienić domyślne ustawienia drukarki, gdy ktoś drukuje w przeglądarce? I oczywiście przez „odbitki z ich przeglądarki” mam na myśli jakąś formę HTML, a nie PDF lub jakiś inny typ MIME zależny od wtyczki.

Proszę zanotować:

Jeśli niektóre przeglądarki to oferują, a inne nie (lub jeśli wiesz, jak to zrobić w przypadku niektórych przeglądarek), z zadowoleniem przyjmuję rozwiązania specyficzne dla przeglądarki.

Podobnie, jeśli znasz ogólną przeglądarkę, która ma określone ograniczenia przeciw EVERowi, aby to robiła, jest to również pomocne, ale doceniona zostanie pewna dość aktualna dokumentacja. (zwykłe powiedzenie „sprzeczne z polityką bezpieczeństwa XYZ” nie jest zbyt przekonujące, gdy XYZ dokonał znaczących zmian we wspomnianej polityce w ciągu ostatnich trzech lat).

Wreszcie, kiedy mówię „zmień domyślne ustawienia drukowania”, nie mam na myśli wieczności, tylko dla mojej strony i mam na myśli w szczególności marginesy wydruku, nagłówki i stopki.

Jestem świadomy, że CSS oferuje opcję zmiany orientacji strony oraz marginesów strony. Jedną z wielu zmagań jest Firefox. Jeśli ustawię marginesy strony na 1 cal, DODAJE to do połowy cala, które już umieszcza.

Bardzo chcę zmniejszyć wykorzystanie plików PDF na stronie mojego klienta, ale naruszenie ich prezentacji (jak również brak wiarygodności) są ich głównym problemem.

javascript html css browser printing Anthony
źródło
Czy jest jakiś konkretny powód, dla którego chcesz to zrobić? Jeśli powiesz o wymaganiu, być może może istnieć inne możliwe rozwiązanie ... Dla mnie zmiana ustawień użytkownika nie wygląda na miłe rozwiązanie ...
Nivas
1
Zgadzam się. Nie chcę zmieniać ustawień użytkownika. Chcę zastąpić domyślne ustawienia przeglądarki. A powodem jest to, że alternatywą jest użycie pliku PDF, co wydaje się niepotrzebne, gdy wszystko inne można uczynić przyjaznym dla drukarki za pomocą CSS.
Anthony,
Widzę, że sprawdziłeś odpowiedź jako rozwiązanie, ale działa TYLKO w chrome. czy udało Ci się uzyskać prawidłowe rozwiązanie dla różnych przeglądarek? a przynajmniej w kilku przeglądarkach? bo mam ten sam problem
mavili
@mavili patrz stackoverflow.com/a/23778125/453605 w celu uzyskania rozwiązania dla różnych przeglądarek.
Marcello Nuccio,

Odpowiedzi:

200

Standard CSS umożliwia zaawansowane formatowanie. W @pageCSS znajduje się dyrektywa, która umożliwia niektóre formatowanie, które dotyczy tylko mediów stronicowanych (takich jak papier). Zobacz http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .

Minusem jest to, że zachowanie w różnych przeglądarkach nie jest spójne. Safari wciąż nie obsługuje ustawiania marginesu strony drukarki, ale wszystkie inne przeglądarki obsługują to teraz.

Dzięki tej @pagedyrektywie możesz określić margines strony drukarki (który nie jest taki sam jak normalny margines CSS elementu 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 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>

Zauważ, że zasadniczo wyłączamy tutaj marginesy specyficzne dla strony, aby osiągnąć efekt usunięcia nagłówka i stopki, więc margines, który ustawiliśmy na treści, nie będzie używany w podziale strony (jak komentuje Konrad ) Oznacza to, że będzie on działał tylko prawidłowo, jeśli drukowana zawartość to tylko jedna strona.

To nie działa w Firefox 3.6 , IE 7 , Safari 5.1.7 lub Google Chrome 4.1 .

Ustawienie marginesu @strona ma wpływ na IE 8 , Opera 10 , Google Chrome 21 i Firefox 19 .
Mimo że marginesy strony są ustawione poprawnie dla treści w tych przeglądarkach, zachowanie nie jest idealne przy próbie rozwiązania ukrywania nagłówka / stopki.

Oto jak zachowuje się w różnych przeglądarkach:

  • W programie Internet Explorer margines jest ustawiony na 0 mm w ustawieniach tego drukowania, a jeśli zrobisz Podgląd, domyślnie otrzymasz 0 mm, ale użytkownik może go zmienić w podglądzie.
    Zobaczysz, że zawartość strony jest właściwie ustawiona poprawnie, ale nagłówek i stopka wydruku przeglądarki są wyświetlane z nieprzezroczystym tłem, dzięki czemu skutecznie ukrywa zawartość strony w tej pozycji.

  • W Firefox nowszych wersjach, jest umieszczony prawidłowo, ale wyświetlany jest zarówno nagłówek / stopka tekst i tekst treść, więc wygląda na to złym połączeniem tekstu nagłówka przeglądarka i treści strony.

  • W Operze zawartość strony ukrywa nagłówek, gdy używasz nieprzezroczystego tła w standardowym css, a pozycja nagłówka / stopki powoduje konflikt z treścią. Całkiem dobrze, ale wygląda dziwnie, jeśli margines jest ustawiony na małą wartość, która powoduje, że nagłówek jest częściowo widoczny. Również margines strony nie jest ustawiony prawidłowo.

  • W nowszych wersjach Chrome nagłówek i stopka przeglądarki są ukryte, jeśli margines @strona jest tak mały, że pozycja nagłówka / stopki powoduje konflikt z treścią. Moim zdaniem dokładnie tak powinno się to zachowywać.

Wniosek jest taki, że Chrome ma najlepszą implementację tego w zakresie ukrywania nagłówka / stopki.

groza
źródło
1
Aby to wyjaśnić, nie wydaje się, aby usuwało to nagłówki w przeglądarce Firefox 21 lub IE10, chociaż podejrzewam, że spowodowało to, że nagłówek / stopka nie zajmowały miejsca. Działa z Chrome 28.
amh15
2
Zaktualizowałem, aby odzwierciedlić nowsze wersje przeglądarki. Chrome ma teraz najlepszą implementację tego.
podziw
@SearchForKnowledge: Tak, jest tak, jak powiedziałem - jeśli przeczytasz moją odpowiedź pod opisem tego, jak zachowuje się w IE: „Zobaczysz, że zawartość strony jest właściwie ustawiona, ale nagłówek wydruku i stopka przeglądarki ukrywają stronę treść na tym stanowisku ”. Mówię, że „działa” w IE 8, nie dlatego, że działa tak, jak chcemy ... Zmodyfikuję swoją odpowiedź, aby było to jaśniejsze.
awe
Usuwa nagłówki, ale także lewy margines. Cały mój tekst jest teraz na krawędzi strony.
Mittchel
7
To rozwiązanie po prostu nie działa w ogóle , ponieważ @pagemarże i bodymarże są fundamentalnie różne rzeczy: bodymargines odnosi się tylko do całego ciała , czyli w górnej części pierwszej strony i na dole ostatniej strony. Dla wszystkich stron pośrednich góra / dół nadal będą miały zerowy margines.
Konrad Rudolph
86

Każda najnowsza wersja Chrome i Opera, a także Firefox 48 alfa 1 i nowszy

Możesz ustawić margines strony do rozmiaru, który jest zbyt mały, aby zawierał tekst, aby to wyłączyć (pożyczanie od odpowiedzi podziwu ):

@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>
Rozwiń fragment kodu

Dla wersji Firefoksa do 48 wersji alfa 1

Możesz dodać mozNoMarginBoxes atrybut do <html>tagu, aby zapobiec drukowaniu adresu URL, numerów stron i innych rzeczy, które Firefox dodaje do marginesu strony.

Działa w przeglądarce Firefox 29 i nowszych. Tutaj możesz zobaczyć zrzut ekranu różnicy lub zobaczyć tutaj przykład na żywo.

Zauważ, że mozDisallowSelectionPrintatrybut w tym przykładzie nie jest wymagany do usunięcia tekstu z marginesów; widzieć Co robi atrybut mozdisallowselectionprint w pliku PDF.js? .

Innych przeglądarkach

Niestety wydaje się, że nie ma sposobu na rozwiązanie tego problemu w Internet Explorerze, więc będziesz musiał skorzystać z formatu PDF lub poprosić użytkowników o wyłączenie tekstu marginesu.

To samo dotyczy Safari; według komentarza @Luiz Perez , najnowsze wersje Safari (8, 9.1 i 10) nadal nie obsługują @pagetłumienia tekstów marginesów.

Nie mogę nic znaleźć na Edge i nie mam dostępnej instalacji Windows 10 do przetestowania.

użytkownik2428118
źródło
5
szczerze, zgadzam się z tym. Działa nawet w Chrome, jeśli drukujesz za pomocą „Systemowego okna dialogowego”. tylko upewnij się, że <!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint>jest ustawiony. Źródło:https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383
Peter
3
Działa świetnie w przeglądarce Firefox. Tak więc wraz z @page{ size: auto; margin: 3mm; } obsługą Chrome i Safari zrobiłem dla mnie rozwiązanie dla różnych przeglądarek.
Clain Dsilva,
To rozwiązanie działa naprawdę dobrze do usuwania niechcianych informacji / treści z materiałów drukowanych w FF. Dzięki!
Varvara Jones
To świetnie, ale co z IE?
Santosh
1
Testowałem ten fragment kodu w Safari 8, 9.1 i 10 i nie usuwa on nagłówka ani stopki w tych wersjach Safari.
Luis Perez
21

Jak wspomniano powyżej, @Awe to rozwiązanie, które zostało potwierdzone do pracy w Chrome !!

Upewnij się tylko, że jest to WEWNĄTRZ znaczników głowy:

<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>
Pracuje
źródło
3
To bardzo dobre rozwiązanie! Usuwa marginesy i usuwa nagłówek i stopkę. Moją jedyną zmianą było dodanie padding: 0.25in 0.5in;do stylów nadwozia, aby uzyskać dokładnie marginesy potrzebne do uzyskania ładnego, czystego wydruku. Pracując w Chrome v25 i na szczęście dla tego konkretnego projektu możemy poprosić użytkowników końcowych o wybranie jednej z kilku nowoczesnych przeglądarek.
Charlie Schliesser,
2
Niestety powoduje to problemy z wydrukami wielostronicowymi. Tekst u dołu strony zostanie obcięty.
Jonathan
Działa doskonale w Chrome 67.0.3396.99 i Firefox 62.0b5 z wydrukiem pojedynczej strony.
killscreen
16

Mam podobne żądanie od klienta, który chce usunąć nagłówek, numery stron i stopkę HTML. W takim przypadku klient przedstawia stronę HTML, która może być podwójna jako formalny certyfikat. Dodany adres URL, strona i nagłówek są nieistotne i prowadzą do niezbyt przyjemnego produktu końcowego. Pod pewnymi względami wygląda po prostu tanio.

Media = Drukuj nie było w stanie wyłączyć tych ustawień domyślnych przeglądarki. Jedynym obejściem jest poinformowanie użytkownika o kliknięciu przycisku „Sprzęt” i włączaniu / wyłączaniu tych elementów. Poważnie, nie miałem pojęcia, że ​​mógłbym to zrobić przez 20 lat (i uważamy, że typowy użytkownik będzie miał wskazówkę, aby kliknąć przycisk przełączania?).

Jeśli CSS obsługuje Media = Drukuj, powinien wspierać możliwość kontrolowania całego procesu drukowania przez użytkownika końcowego. Rozumiem, że przeglądarki udostępniają dodane pola, ale dlaczego nie pozwolić CSS kontrolować ogólną jakość drukowania - jeśli jest to pożądane. 90% rozwiązanie może wynosić 100% z trzema dodatkowymi polami! Prosty:

#BrowserPrintDefaults{display:none}

wystarczyłoby.

Ponownie, nie ma znaczenia, czy użytkownik końcowy chce go wydrukować, czy nie (może twój klient jest bardzo prywatny i nie chce, aby drukowane adresy URL się zmieniały. A może zespół zarządzający korzysta z prywatnych witryn do współpracy?). Cieszę się, że bronisz użytkownika końcowego, ale jeśli ktoś szuka odpowiedzi, nie odpowiadaj, mówiąc, że użytkownik ma prawo do pokazywania lub ukrywania się. Czasami klient ma prawo płacić rachunki.

CAL
źródło
W końcu poddałem się, tak jak nie chciałem. Zdecydowanie zgadzam się, że powinno to zostać ujawnione w CSS, ponieważ wszystkie przeglądarki mają te ustawienia i jest to element prezentacji. Zamiast tego jest to scena preferencji na poziomie aplikacji, na przykład wyłączenie plików cookie.
Anthony
1
Jest to oficjalny standard CSS wykorzystujący @Pagedyrektywę do ustawiania marginesu drukarki (który nie jest taki sam jak margines treści strony HTML). Obecnie jest obsługiwany przez wszystkie główne przeglądarki oprócz Safari, ale jego wpływ na nagłówek / stopkę jest różny. Najlepsze implementacje znajdują się w Operze i Chrome.
awe
6

Wypróbuj ten kod, działa w 100% dla mnie:
DLA Krajobrazu:

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

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

</style>
</head>

DLA Portait:

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

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

</style>
</head>
Tak, chłopcze
źródło
1
Reguły strony CSS ustawiają marginesy, ale nie usuwają wbudowanego nagłówka i stopki umieszczanych przez przeglądarkę (adres URL strony, numer strony itp.)
Anthony
0

Ponieważ wspomniałeś „w ich przeglądarce” i Firefox, jeśli używasz Internet Explorera, możesz wyłączyć nagłówek / stopkę strony, tymczasowo ustawiając wartość w rejestrze, patrz tutaj przykład. AFAIK Nie słyszałem o tym, aby zrobić to w innych przeglądarkach. Wydaje się, że zarówno odpowiedzi Daniela, jak i Mickela kolidują ze sobą. Wydaje mi się, że w rejestrze może być podobne ustawienie do usuwania nagłówków / stopek lub dostosowywania ich przez firefoxa. Sprawdziłeś to?

Mam nadzieję, że to pomoże i Wesołych Świąt, Z poważaniem, Tom.

t0mm13b
źródło
1
W IE7 + możesz wyłączyć nagłówek / stopkę jednym kliknięciem przycisku w podglądzie wydruku. Nie trzeba tego robić w rejestrze!
awe
0

Margines strony: 0 mm działa teraz w przeglądarce Firefox 19.0a2 (2012-12-07).

Thinsoldier
źródło
0

Rozwiązałem problem za pomocą css na stronie internetowej.

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>
Kabir Hossain
źródło
0

To działało dla mnie z marginesem około 1 cm

@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
źródło