Usuń nagłówek i stopkę z window.print ()

109

Używam window.print () do drukowania strony, ale otrzymałem nagłówek i stopkę zawierającą tytuł strony, ścieżkę do pliku, numer strony i datę. Jak je usunąć?

Próbowałem również wydrukować arkusz stylów.

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

Proszę pomóż. Dzięki.

css printing

— Viralk
źródło

7

Te elementy są specyficzne dla ustawień przeglądarki użytkownika. Nie sądzę, abyś mógł je usunąć za pomocą CSS lub JavaScript.

— Michael Berkowski,

Myślę, że to pytanie wymaga wyjaśnienia: czy próbujesz usunąć elementy nagłówka i stopki z kodu HTML wyświetlanego na ekranie, czy też chcesz usunąć nagłówki i stopki, które są dodawane przez funkcję drukowania?

— AlanObject

149

W przeglądarce Chrome można ukryć ten automatyczny nagłówek / stopkę za pomocą

@page { margin: 0; }

Ponieważ zawartość będzie się rozciągać do granic strony, nagłówek / stopka drukowania strony będzie nieobecny. W takim przypadku powinieneś oczywiście ustawić marginesy / dopełnienia w elemencie body, aby zawartość nie rozciągała się aż do krawędzi strony. Ponieważ zwykłe drukarki po prostu nie mogą drukować bez marginesów i prawdopodobnie nie jest to to, czego chcesz, powinieneś użyć czegoś takiego:

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

Jak zauważył Martin w komentarzu, jeśli strona ma długi element, który przewija się poza jedną stronę (jak duża tabela), margines jest ignorowany, a wydrukowana wersja będzie wyglądać dziwnie.

W chwili oryginalnej odpowiedzi (maj 2013) działała tylko w Chrome, teraz nie jestem tego pewien, nigdy nie trzeba było próbować ponownie. Jeśli potrzebujesz wsparcia dla przeglądarki, której nie można naprawić, możesz utworzyć plik PDF w locie i wydrukować go (możesz utworzyć samodrukowy plik PDF z osadzeniem JavaScript), ale to ogromny problem.

— diego nunes
źródło

2

Z jakiegoś powodu body { margin: 1.6cm; }ignorowałem dla mnie prawy margines (być może dlatego, że używałem text-align:right), więc zamiast tego utworzyłem <div class="container">dla mojej treści i .container { margin: 1.6cm; }zamiast tego użyłem .

— rybo111

8

Próbuję tego z Chrome 33. Działa świetnie, ale bądź ostrożny, ponieważ body { margin: 1.6cm; }- ponieważ jest to margines dla całego dokumentu - nie będzie uwzględniał marginesów pionowych w przypadku dokumentów wielostronicowych, z wyjątkiem pierwszego i ostatniego. Niestety nie mogę wymyślić obejścia.

— pau.moreno

Hej @Diego, jestem zadowolony z twojej sugestii i moja stopka w nagłówku została usunięta, ale moja strona do druku wzrosła. "body {margines: 1,6cm;}" po prostu zmień 1,6cm na 1,0cm i już działa .. :) Miłego kodowania

— Vishal Kiri

3

Tutaj jest bardziej obszerna odpowiedź: stackoverflow.com/questions/1960939/…

— jedison

Usunięcie marginesu strony i dodanie marginesu treści generowało dla mnie pustą stronę. Zmieniłem margines ciała na wyściółkę i zadziałało.

— André Guimarães Sakata

21

Jestem pewien, że dodanie tego kodu do pliku css rozwiąże problem

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

Możesz odwiedzić to miejsce, aby dowiedzieć się więcej na ten temat

— Rudias
źródło

4

Nie. To nie działa. To ustalanie marginesu, to wszystko. Jest nadal wyświetla datę i czas url na nagłówka i stopki

— Learner

Działa dla Chrome i Firefox, ale nie IE 11.

— Sammi

21

Firefox:

Dodaj moznomarginboxesatrybut w<html>

Przykład:

<html moznomarginboxes mozdisallowselectionprint>

— l2aelba
źródło

6

To już nie zadziała po wydaniu Firefoksa 48 (sierpień 2016): bugzilla.mozilla.org/show_bug.cgi?id=1260480

— Aljullu

to nie działa dla mnie, FF 61, ale @page {margin: 0; } wydaje się działać również w FF.

— Kiko,

11

Dzisiaj mój kolega natknął się na ten sam problem.

Ponieważ rozwiązanie „margin: 0” działa w przeglądarkach opartych na chromie, program Internet Explorer nadal drukuje stopkę, nawet jeśli marginesy @ strony są ustawione na zero.

Rozwiązaniem (bardziej hack) było umieszczenie ujemnego marginesu na @page.

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

Należy pamiętać, że ujemny margines nie będzie działał dla osi Y, tylko dla X

Mam nadzieję, że to pomoże.

— Nick Panov
źródło

8

Standard CSS umożliwia zaawansowane formatowanie. W CSS istnieje dyrektywa @page, która umożliwia pewne formatowanie, które ma zastosowanie tylko do stronicowanych mediów (takich jak papier). Zobacz 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>

Rozwiń fragment

a dla Firefoxa użyj go

W przeglądarce Firefox: https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (wyświetl źródło strony :: tag HTML).

W kodzie, wymienić <html>z<html moznomarginboxes mozdisallowselectionprint>.

— Hossein Ghaem
źródło

4

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

— Sheak Abdulla
źródło

Wygląda na to, że jest to właściwy sposób. Nawet w moim przypadku w kontekście iframe działa świetnie.

— TwystO,

2

To będzie najprostsze rozwiązanie. Wypróbowałem większość rozwiązań w internecie, ale tylko to mi pomogło.

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

— Yasitha
źródło

11

To nic nie daje.

— noce

1

@page { margin: 0; }działa dobrze w Chrome i Firefox. Nie znalazłem sposobu, aby naprawić IE przez css. Ale możesz przejść do ustawień strony w IE na swoim własnym komputerze i ustawić marginesy na 0. Naciśnij alt, a następnie menu plików w lewym górnym rogu, a znajdziesz Ustawienia strony. Działa to tylko dla jednej maszyny na raz ...

— Sammi
źródło

0

1. W przypadku przeglądarki Chrome i IE

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

Dla FireFox, jak powiedział l2aelba ,

Dodaj atrybut moznomarginboxes w przykładzie:

<html moznomarginboxes mozdisallowselectionprint>

— Nikhilus
źródło

W powyższym kodzie <div id = "header" style = "background-color: White;"> </div> <div id = "footer" style = "background-color: White;"> </div> są opcjonalne .

— Nikhilus

0

Próbowałem usunąć nagłówek i stopkę strony html, którą wydrukowałem ręcznie.

Żadne rozwiązanie na tej stronie nie zadziałało, ale po prostu zdefiniowałem własną stopkę, jak wyjaśniono tutaj, Firefox nie dodałby własnego nagłówka i stopki.

To niestety nie działa w Chrome.

W CSS:

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

Dodaj to do swojego HTML:

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

— lwinkler
źródło

-1

Jeśli przewiniesz w dół do tego punktu, znalazłem rozwiązanie dla przeglądarki Firefox. Wyświetli zawartość określonego elementu div bez stopek i nagłówków. Możesz dostosować, jak chcesz.

Najpierw pobierz i zainstaluj ten dodatek: JSPrintSetup .

Po drugie, napisz tę funkcję:

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

Po trzecie, w swoim kodzie, gdziekolwiek chcesz napisać kod wydruku, zrób to (użyłem JQuery. Możesz użyć zwykłego javascript):

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

Oczywiście do kliknięcia potrzebny jest link:

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

I twój div do wydrukowania:

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

— Josiah
źródło

-3

nie musisz pisać żadnego kodu. tuż przed wywołaniem window.print () po raz pierwszy zmień ustawienia drukowania swojej przeglądarki. na przykład w przeglądarce Firefox:

Naciśnij klawisz Alt lub F10, aby wyświetlić pasek menu
Kliknij Plik, a następnie Ustawienia strony
Wybierz kartę Marginesy i nagłówek / stopki
Zmień adres URL na pusty -> obraz

i jeszcze jeden przykład dla IE (używam IE 11 do poprzednich wersji, możesz zobaczyć to Zapobiegaj drukowaniu adresu URL na każdej stronie przez przeglądarkę Firefox lub Internet Explorer ):

Naciśnij klawisz Alt lub F10, aby wyświetlić pasek menu
Kliknij Plik, a następnie Ustawienia strony
w sekcji Nagłówki i stopki Zmień adres URL na pusty.

— alireza azami
źródło

Chociaż ten link może odpowiedzieć na pytanie, lepiej jest zawrzeć tutaj zasadnicze części odpowiedzi i podać link do odniesienia. Odpowiedzi zawierające tylko łącze mogą stać się nieprawidłowe, jeśli połączona strona ulegnie zmianie. - Z recenzji

— SurvivalMachine,

dzięki za sugestię SurvivalMachine. Kilka minut temu zredagowałam odpowiedź :)

— alireza azami

Hmmm ... Nie mam ochoty biegać po wszystkich moich użytkownikach i aktualizować ich przeglądarki (niezależnie od tego, jak wielu z nich używają), aby uwzględnić tę jedną aplikację, zwłaszcza jeśli mieszkają po drugiej stronie planety. A jeśli potrzebują z powrotem ustawienia dla innej aplikacji? To nie jest odpowiedź.

— Paul

W tym podejściu brakuje funkcji dla różnych przeglądarek, którą zapewniłaby funkcja umieszczona na stronie / aplikacji.

— killscreen