Hapus header dan footer dari window.print ()

109

Saya menggunakan window.print () untuk mencetak halaman, tetapi saya mendapatkan header dan footer berisi judul halaman, jalur file, nomor halaman, dan tanggal. Bagaimana cara menghapusnya?

Saya juga mencoba mencetak lembar gaya.

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

Tolong bantu. Terima kasih.

css  printing 
— Viralk
sumber
7
Elemen tersebut khusus untuk pengaturan browser pengguna. Saya tidak berpikir Anda akan dapat menghapusnya melalui CSS atau JavaScript.
— Michael Berkowski
Saya rasa pertanyaan ini memerlukan klarifikasi: Apakah Anda mencoba menghapus elemen header dan footer HTML yang ditampilkan di layar atau Anda ingin menghilangkan header dan footer yang ditambahkan oleh fungsi cetak?
— AlanObject

Jawaban:

149

Di Chrome dimungkinkan untuk menyembunyikan header / footer otomatis ini menggunakan

@page { margin: 0; }

Karena konten akan meluas ke batas halaman, header / footer pencetakan halaman tidak akan ada. Anda harus, tentu saja, dalam kasus ini, mengatur beberapa margin / paddings di elemen body Anda sehingga konten tidak akan meluas sampai ke tepi halaman. Karena printer umum tidak bisa mendapatkan pencetakan tanpa margin dan mungkin itu bukan yang Anda inginkan, Anda harus menggunakan sesuatu seperti ini:

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

Sebagai Martin ditunjukkan dalam komentar, jika halaman memiliki elemen panjang yang melewati satu halaman (seperti tabel besar), margin diabaikan dan versi cetak akan terlihat aneh.

Pada saat jawaban asli ini (Mei 2013), itu hanya berfungsi di Chrome, tidak yakin tentang itu sekarang, tidak perlu mencoba lagi. Jika Anda memerlukan dukungan untuk peramban yang tidak dapat mendukung, Anda dapat membuat PDF dengan cepat dan mencetaknya (Anda dapat membuat PDF yang dicetak sendiri dengan menyematkan JavaScript di dalamnya), tetapi itu sangat merepotkan.

— diego nunes
sumber
2
Untuk beberapa alasan, body { margin: 1.6cm; }mengabaikan margin yang tepat untuk saya (mungkin karena saya sedang menggunakan text-align:right), jadi saya membuat <div class="container">untuk konten saya dan menggunakannya .container { margin: 1.6cm; }sebagai gantinya.
— rybo111
8
Saya mencoba ini dengan Chrome 33. Ini berfungsi dengan baik, tetapi hati-hati, karena body { margin: 1.6cm; }- karena ini adalah margin untuk seluruh dokumen - tidak akan menghormati margin vertikal untuk dokumen multi-halaman, kecuali yang pertama dan terakhir. Sayangnya, saya tidak bisa menemukan solusi.
— pau.moreno
Hai @Diego, saya senang dengan saran Anda dan footer header saya telah dihapus tetapi halaman cetak saya bertambah. "body {margin: 1.6cm;}" ubah saja 1,6cm menjadi 1,0cm dan berfungsi .. :) Selamat codding
— Vishal Kiri
3
Ada jawaban yang lebih luas di sini: stackoverflow.com/questions/1960939/…
— jedison
Menghapus margin halaman dan menambahkan margin badan menghasilkan halaman kosong untuk saya. Saya mengubah margin tubuh menjadi bantalan dan berhasil.
— André Guimarães Sakata
21

Saya yakin Menambahkan kode ini pada file css Anda akan menyelesaikan masalah

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

Anda dapat mengunjungi ini untuk mengetahui lebih banyak tentang ini

— Rudias
sumber
3
Tidak. Ini tidak bekerja. Itu adalah pengaturan margin itu saja. Itu masih menampilkan url dan waktu tanggal di header dan footer
— Pelajar
Bekerja untuk Chrome dan Firefox, tetapi tidak untuk IE 11.
— Sammi
21

Firefox:

  • Tambahkan moznomarginboxesatribut di<html>

Contoh:

<html moznomarginboxes mozdisallowselectionprint>
— l2aelba
sumber
6
Ini tidak akan berfungsi lagi setelah Firefox 48 dirilis (Agustus 2016): bugzilla.mozilla.org/show_bug.cgi?id=1260480
— Aljullu
itu tidak berhasil untuk saya, FF 61, tapi @page {margin: 0; } Solusi tampaknya bekerja di FF juga.
— Kiko
11

Hari ini kolega saya menemukan masalah yang sama.

Karena solusi "margin: 0" berfungsi untuk browser berbasis chromium, bagaimanapun, Internet Explorer terus mencetak footer bahkan jika margin @halaman disetel ke nol.

Solusinya (lebih merupakan peretasan) adalah menempatkan margin negatif pada halaman @.

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

Harap dicatat bahwa margin negatif tidak akan berfungsi untuk sumbu Y, hanya untuk X

Semoga membantu.

— Nick Panov
sumber
8

Standar CSS memungkinkan beberapa pemformatan lanjutan. Ada @page direktif dalam CSS yang memungkinkan beberapa pemformatan yang hanya berlaku untuk media halaman (seperti kertas). Lihat 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>
Luaskan cuplikan

dan untuk firefox menggunakannya

Di Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (lihat sumber halaman :: tag HTML).

Di kode Anda, ganti <html>dengan<html moznomarginboxes mozdisallowselectionprint>.

— Hossein Ghaem
sumber
4 
@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}
— Sheak Abdulla
sumber
Sepertinya ini cara yang tepat untuk melakukannya. Bahkan dalam kasus saya dalam konteks iframe, itu berfungsi dengan baik.
— TwystO
2

Ini akan menjadi solusi paling sederhana. Saya mencoba sebagian besar solusi di internet tetapi hanya ini yang membantu saya.

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}
— Yasitha
sumber
11
Ini tidak melakukan apa-apa.
— malam
1

@page { margin: 0; }berfungsi dengan baik di Chrome dan Firefox. Saya belum menemukan cara untuk memperbaiki IE melalui css. Tapi Anda bisa masuk ke Page Setup di IE pada mesin Anda sendiri di dan mengatur margin ke 0. Tekan alt dan kemudian menu file di pojok kiri atas dan Anda akan menemukan Page Setup. Ini hanya berfungsi untuk satu mesin dalam satu waktu ...

— Sammi
sumber
0

1. Untuk Chrome & 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>
  1. Untuk FireFox seperti yang dikatakan l2aelba ,

Tambahkan atribut moznomarginboxes di Contoh:

<html moznomarginboxes mozdisallowselectionprint>
— Nikhilus
sumber
Dalam kode di atas, <div id = "header" style = "background-color: White;"> </div> <div id = "footer" style = "background-color: White;"> </div> bersifat opsional .
— Nikhilus
0

Saya mencoba menghapus header dan footer dari halaman html yang saya cetak secara manual.

Tidak ada solusi pada halaman ini yang berhasil untuk saya tetapi hanya dengan mendefinisikan footer saya sendiri seperti yang dijelaskan di sini Firefox tidak akan menambahkan header dan footernya sendiri.

Sayangnya ini tidak berfungsi di Chrome.

Di CSS:

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

Tambahkan ini ke HTML Anda:

<div class="divFooter">
<p>UNCLASSIFIED</p>
</div>
``
— lwinkler
sumber
-1

Jika Anda kebetulan menggulir ke bawah ke titik ini, saya menemukan solusi untuk Firefox. Ini akan mencetak konten dari div tertentu tanpa footer dan header. Anda dapat menyesuaikan sesuai keinginan.

Pertama, unduh dan instal addon ini: JSPrintSetup .

Kedua, tulis fungsi ini: 

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

Ketiga, Dalam kode Anda, di mana pun Anda ingin menulis kode cetak, lakukan ini (Saya telah menggunakan JQuery. Anda dapat menggunakan javascript biasa):

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

Tentunya, Anda memerlukan tautan untuk mengklik:

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

Dan div Anda untuk dicetak:

<div id="yourDivToPrint">....</div>
— Josiah
sumber
-3

Anda tidak perlu menulis kode apa pun. sebelum memanggil window.print () untuk pertama kalinya ubah pengaturan cetak di browser Anda. misalnya di firefox:

  1. Tekan Alt atau F10 untuk melihat bilah menu
  2. Klik File, lalu Page Setup
  3. Pilih tab Margins & Header / Footers
  4. Ubah URL untuk kosong -> gambar

dan satu contoh lain untuk IE (Saya menggunakan IE 11 untuk versi sebelumnya, Anda dapat melihat ini Mencegah Firefox atau Internet Explorer dari Mencetak URL di Setiap Halaman ):

  1. Tekan Alt atau F10 untuk melihat bilah menu
  2. Klik File, lalu Page Setup
  3. di bagian Headers and Footers Ubah URL untuk kosong.
— alireza azami
sumber
Meskipun tautan ini mungkin menjawab pertanyaan, lebih baik menyertakan bagian penting dari jawaban di sini dan menyediakan tautan untuk referensi. Jawaban link saja bisa menjadi tidak valid jika halaman tertaut berubah. - Dari Ulasan
— SurvivalMachine
terima kasih atas saran SurvivalMachine. Saya mengedit jawaban saya beberapa menit yang lalu :)
— alireza azami
Hmmm ... Saya tidak suka berurusan dengan semua pengguna saya dan memperbarui browser mereka (berapa pun banyaknya yang mereka gunakan) untuk memperhitungkan aplikasi yang satu ini, terutama jika mereka tinggal di belahan bumi lain. Selain itu, bagaimana jika mereka membutuhkan pengaturan kembali untuk aplikasi lain? Ini bukanlah jawaban.
— Paul
Pendekatan ini tidak memiliki fungsionalitas lintas browser yang disediakan oleh fitur yang dimasukkan ke dalam halaman / aplikasi.
— killscreen
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.