Menghapus header dan footer dari jendela.print()

Saya menggunakan jendela.cetak() untuk mencetak halaman, tapi aku punya header dan footer berisi halaman judul, file path, nomor halaman dan tanggal. Bagaimana untuk menghapusnya?

Saya mencoba print stylesheet juga.

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

Mohon bantuan.... Terima kasih.

jprofitt
Pertanyaan edit 22 November 2011 в 2:08
Pemrograman
printing css
22 November 2011 в 2:05
168 tayangan
Mengomentari pertanyaan (1)

Di Chrome itu's mungkin untuk menyembunyikan ini otomatis header/footer menggunakan

@page { margin: 0; }

Karena isi akan memperpanjang untuk halaman's batas, halaman pencetakan header/footer akan absen. Anda harus, tentu saja, dalam hal ini, menetapkan beberapa margin/bantalan dalam tubuh anda elemen sehingga konten tidak't memperpanjang sepanjang jalan untuk halaman's edge. Sejak printer umum hanya dapat't mendapatkan no-margin pencetakan dan's mungkin bukan apa yang anda inginkan, anda harus menggunakan sesuatu seperti ini:

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

Sebagai Martin kemukakan dalam komentar, jika halaman tersebut memiliki panjang elemen yang gulungan lalu satu halaman (seperti tabel), margin diabaikan dan versi cetak akan terlihat aneh.

Pada waktu asli dari jawaban ini (Mei 2013), itu hanya bekerja pada Chrome, tidak yakin tentang hal itu sekarang, tidak pernah diperlukan untuk mencoba lagi. Jika anda membutuhkan dukungan untuk browser yang dapat di't hable, anda dapat membuat PDF dengan cepat dan cetak bahwa (anda dapat membuat self-cetak PDF menanamkan JavaScript pada itu), tapi yang's kerumitan besar.

isherwood
Jawaban edit 31 Januari 2019 в 4:12
Komentar (6)

Firefox :

  • Tambahkan moznomarginboxes atribut <html>

Contoh :

Komentar (2)

Saya yakin untuk Menambahkan kode ini di file css yang akan memecahkan masalah


    @page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

Anda dapat mengunjungi situs ini untuk mengetahui lebih lanjut tentang ini

Komentar (2)

Hari ini rekan saya tersandung masalah yang sama.

Sebagai "margin:0" solusi bekerja untuk browser berbasis chromium, namun, Internet Explorer terus mencetak footer bahkan jika @margin halaman yang diatur ke nol.

Solusi (lebih dari hack) adalah untuk menempatkan marjin negatif pada @halaman.

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

Harap dicatat bahwa marjin negatif won't bekerja untuk sumbu Y, untuk X

Semoga membantu.

Komentar (0)

CSS standar memungkinkan beberapa format maju. Ada @page directive dalam CSS yang memungkinkan beberapa format yang berlaku hanya untuk paged media (seperti kertas). Lihat http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.



    Print Test

        @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 */
       }



  <div>Top line</div>
  <div>Line 2</div>

dan untuk menggunakannya firefox

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

Dalam kode anda, ganti <html> dengan <html moznomarginboxes mozdisallowselectionprint>.

Hossein Ghaem
Jawaban edit 11 Januari 2016 в 1:56
Komentar (0)

``css @media print { .footer,

non-printable {

display: none !penting; }

cetak {

display: block; } } ``

Nick Reed
Jawaban edit 7 Oktober 2019 в 11:38
Komentar (1)

Ini akan menjadi solusi yang paling sederhana. Aku mencoba sebagian besar dari semua solusi di internet, tetapi hanya ini membantu saya.

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}
Komentar (1)

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

Ada solusi di halaman ini bekerja untuk saya, tapi hanya dengan mendefinisikan saya sendiri footer seperti yang dijelaskan here Firefox tidak akan menambah sendiri header dan footer.

Ini tidak bekerja pada Chrome sayangnya.

Dalam CSS: @media screen { div.divFooter { display: none; } } @media print { div.divFooter { position: fixed; bottom: 0; } } Tambahkan ini ke dalam HTML anda: ``

UNCLASSIFIED

`
Komentar (0)

anda don't harus menulis kode apapun. sebelum memanggil jendela.cetak() dalam waktu yang pertama mengubah setelan cetak dari browser anda. misalnya di firefox:

  1. Tekan Alt atau F10 untuk melihat menu bar
  2. Klik pada File, kemudian Page Setup
  3. Pilih tab Margin & Header/Footer
  4. Mengubah URL untuk kosong -> image

dan salah satu contoh lain YAITU (I'm menggunakan IE 11 untuk versi sebelumnya anda bisa melihat ini Mencegah Firefox atau Internet Explorer Cetak URL pada Setiap Halaman):

  1. Tekan Alt atau F10 untuk melihat menu bar
  2. Klik pada File, kemudian Page Setup
  3. di Header dan Footer bagian Mengubah URL untuk kosong.
alireza azami
Jawaban edit 27 September 2016 в 12:17
Komentar (4)

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 sebagai l2aelba kata,

Tambahkan moznomarginboxes atribut di Contoh :

Komentar (1)

Jika anda kebetulan untuk gulir ke bawah ke titik ini, saya menemukan solusi untuk Firefox. Itu akan mencetak isi dari tertentu tanpa div footer dan header. Anda dapat menyesuaikan yang anda inginkan.

Pertama, men-download dan menginstal addon ini : JSPrintSetup.

Kedua, menulis fungsi ini: 

<script>
function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');
    mywindow.document.write('' + document.title  + '');
    mywindow.document.write('');
    mywindow.document.write(elem);
    mywindow.document.write('');
    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 inginkan untuk menulis cetak kode, lakukan ini (saya telah menggunakan JQuery. Anda dapat menggunakan javascript biasa):

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

Jelas, anda perlu untuk mengklik link:

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

Dan anda div untuk mencetak:

<div id="yourDivToPrint">....</div>
Komentar (0)