Menonaktifkan opsi cetak browser (header, footer, margin) dari halaman?

182

Saya telah melihat pertanyaan ini ditanyakan dalam beberapa cara berbeda pada SO dan beberapa situs web lain, tetapi kebanyakan dari mereka terlalu spesifik atau ketinggalan zaman. Saya berharap seseorang dapat memberikan jawaban yang pasti di sini tanpa menjadi spekulasi.

Apakah ada cara, baik dengan CSS atau javascript, untuk mengubah pengaturan printer default ketika seseorang mencetak di dalam browser mereka? Dan tentu saja dengan "cetakan dari browser mereka" maksud saya beberapa bentuk HTML, bukan PDF atau plug-in mime-type yang bergantung.

Tolong dicatat:

Jika beberapa browser menawarkan ini dan yang lainnya tidak (atau jika Anda hanya tahu cara melakukannya untuk beberapa browser), saya menyambut solusi khusus browser.

Demikian pula, jika Anda mengetahui peramban utama yang memiliki batasan spesifik terhadap EVER melakukan ini, itu juga bermanfaat, tetapi beberapa dokumentasi yang cukup mutakhir akan dihargai. (hanya mengatakan "itu bertentangan dengan kebijakan keamanan XYZ" tidak terlalu meyakinkan ketika XYZ telah membuat perubahan signifikan dalam kebijakan tersebut dalam tiga tahun terakhir).

Akhirnya, ketika saya mengatakan "ubah pengaturan cetak default" saya tidak bermaksud selamanya, hanya untuk halaman saya, dan saya merujuk secara khusus untuk mencetak margin, header, dan footer.

Saya sangat menyadari bahwa CSS menawarkan opsi untuk mengubah orientasi halaman serta margin halaman. Salah satu dari banyak perjuangan adalah dengan Firefox. Jika saya mengatur margin halaman ke 1 inci, itu ADDS ini ke setengah inci yang sudah dimasukkan ke tempatnya.

Saya sangat ingin mengurangi penggunaan PDF di situs klien saya, tetapi pelanggaran pada presentasi (serta kurangnya keandalan) adalah perhatian utama mereka.

javascript html css browser printing Anthony
sumber
Apakah ada alasan khusus mengapa Anda ingin melakukannya? Jika Anda mengatakan persyaratan, maka mungkin ada bisa menjadi lain mungkin solusi ... Bagi saya mengubah pengaturan pengguna tidak terlihat seperti solusi yang bagus ...
Nivas
1
Saya setuju. Saya tidak ingin mengubah pengaturan pengguna. Saya ingin menimpa pengaturan default browser. Dan alasannya adalah karena alternatifnya adalah menggunakan PDF, yang tampaknya tidak perlu ketika segala sesuatu dapat dibuat ramah-printer melalui CSS.
Anthony
Saya melihat Anda sudah memeriksa jawabannya sebagai solusinya, tetapi HANYA berfungsi di chrome. apakah Anda bisa mendapatkan solusi cross-browser yang benar? atau setidaknya di beberapa browser? karena saya punya masalah yang sama
mavili
@mavili lihat stackoverflow.com/a/23778125/453605 untuk solusi lintas-peramban.
Marcello Nuccio

Jawaban:

200

Standar CSS memungkinkan beberapa pemformatan tingkat lanjut. Ada @pagearahan 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 .

Kelemahannya adalah bahwa perilaku di browser yang berbeda tidak konsisten. Safari masih tidak mendukung pengaturan margin halaman printer sama sekali, tetapi semua browser utama lainnya sekarang mendukungnya.

Dengan @pagearahan, Anda dapat menentukan margin printer dari halaman (yang tidak sama dengan margin CSS normal dari elemen 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>

Perhatikan bahwa kami pada dasarnya menonaktifkan margin khusus halaman di sini untuk mencapai efek menghapus header dan footer, sehingga margin yang kami tetapkan pada tubuh tidak akan digunakan dalam page break (seperti yang dikomentari oleh Konrad ) Ini berarti bahwa itu hanya akan berfungsi benar jika konten yang dicetak hanya satu halaman.

Ini tidak berfungsi di Firefox 3.6 , IE 7 , Safari 5.1.7 atau Google Chrome 4.1 .

Pengaturan margin halaman memang memiliki efek di IE 8 , Opera 10 , Google Chrome 21 dan Firefox 19 .
Meskipun margin halaman diatur dengan benar untuk konten Anda di browser ini, perilaku tersebut tidak ideal dalam mencoba menyelesaikan penyembunyian header / footer.

Ini adalah bagaimana berperilaku di browser yang berbeda:

  • Di Internet Explorer , margin sebenarnya diatur ke 0mm di pengaturan untuk pencetakan ini, dan jika Anda melakukan Preview, Anda akan mendapatkan 0mm sebagai default, tetapi pengguna dapat mengubahnya di preview.
    Anda akan melihat bahwa konten halaman sebenarnya diposisikan dengan benar, tetapi header dan footer print browser ditampilkan dengan latar belakang yang tidak transparan, dan secara efektif menyembunyikan konten halaman pada posisi itu.

  • Di Firefox versi yang lebih baru, ia diposisikan dengan benar, tetapi teks header / footer dan teks konten ditampilkan, sehingga terlihat seperti campuran yang buruk dari teks header browser dan konten halaman Anda.

  • Di Opera , konten halaman menyembunyikan header saat menggunakan latar belakang non-transparan di css standar dan posisi header / footer bertentangan dengan konten. Cukup bagus, tetapi terlihat aneh jika margin diatur ke nilai kecil yang menyebabkan header sebagian terlihat. Juga margin halaman tidak diatur dengan benar.

  • Di Chrome versi yang lebih baru, header dan footer browser disembunyikan jika margin halaman diatur sangat kecil sehingga posisi header / footer bertentangan dengan konten. Menurut pendapat saya, beginilah seharusnya perilaku ini.

Jadi kesimpulannya adalah bahwa Chrome memiliki implementasi terbaik dalam hal ini untuk menyembunyikan header / footer.

perasaan kagum
sumber
1
Untuk memperjelas, ini sepertinya tidak menghapus header dengan Firefox 21 atau IE10, meskipun saya curiga hal itu menyebabkan header / footer tidak memakan ruang. Ini berfungsi dengan Chrome 28.
amh15
2
Saya telah memperbarui untuk mencerminkan versi browser yang lebih baru. Chrome sekarang memiliki implementasi terbaik untuk ini.
awe
@SearchForKnowledge: Ya, seperti yang saya katakan - jika Anda membaca jawaban saya di bawah uraian tentang bagaimana berperilaku di IE: "Anda akan melihat bahwa konten halaman sebenarnya diposisikan dengan benar, tetapi header dan footer cetak browser menyembunyikan halaman konten di posisi itu. " Saya mengatakannya "memang memiliki efek" di IE 8, tidak berfungsi seperti yang kita inginkan ... Saya akan mengedit jawaban saya untuk membuat ini lebih jelas.
awe
Menghapus header, tetapi juga marign kiri. Jadi semua teks saya ada di tepi halaman sekarang.
Mittchel
7
Solusi ini hanya tidak bekerja sama sekali , karena @pagemargin dan bodymargin pada dasarnya hal yang berbeda: bodymarjin hanya berlaku untuk seluruh tubuh , yaitu bagian atas halaman pertama dan bagian bawah halaman terakhir. Untuk semua halaman perantara, bagian atas / bawah masih memiliki margin nol.
Konrad Rudolph
86

Versi Chrome dan Opera terbaru, serta Firefox 48 alpha 1 dan lebih tinggi

Anda dapat mengatur margin halaman ke ukuran yang terlalu kecil untuk memuat teks untuk menonaktifkannya (meminjam dari jawaban awe ):

@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>
Luaskan cuplikan

Untuk versi Firefox hingga 48 alpha 1

Anda dapat menambahkan mozNoMarginBoxesatribut ke <html>tag untuk mencegah URL, nomor halaman, dan hal-hal lain yang ditambahkan oleh Firefox pada margin halaman.

Ini bekerja di Firefox 29 dan seterusnya. Anda dapat melihat tangkapan layar perbedaannya di sini , atau lihat di sini untuk contoh langsung.

Perhatikan bahwa mozDisallowSelectionPrintatribut dalam contoh tidak diperlukan untuk menghapus teks dari margin; lihat Apa yang dilakukan atribut mozdiselowselectionprint dalam PDF.js? .

Peramban lain

Sayangnya, sepertinya tidak ada cara untuk menyelesaikan masalah ini di Internet Explorer, jadi Anda harus menggunakan PDF atau meminta pengguna untuk menonaktifkan teks margin.

Hal yang sama berlaku untuk Safari; menurut komentar oleh @Luiz Perez , versi terbaru Safari (8, 9.1 dan 10) masih tidak mendukung @pageuntuk menekan teks margin.

Saya tidak dapat menemukan apa pun di Edge dan saya tidak memiliki instalasi Windows 10 yang tersedia untuk diuji.

pengguna2428118
sumber
5
jujur, saya setuju dengan ini. Bahkan berfungsi di Chrome jika Anda mencetak menggunakan "System dialog". pastikan itu <!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint>sudah diatur. Sumber:https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383
Peter
3
Berfungsi bagus di Firefox. Jadi ini bersama dengan @page{ size: auto; margin: 3mm; } untuk mendukung chrome dan safari melakukan solusi lintas-browser untuk saya.
Clain Dsilva
Solusi ini berfungsi dengan sangat baik untuk menghapus info / konten yang tidak diinginkan dalam bahan cetakan di FF. Terima kasih!
Varvara Jones
Ini bagus, tapi bagaimana dengan IE?
Santosh
1
Saya menguji cuplikan ini di Safari 8, 9.1, dan 10 dan tidak menghapus header atau footer di versi Safari tersebut.
Luis Perez
21

Seperti yang telah dikatakan @Awe di atas, ini adalah solusinya, yang dikonfirmasi untuk berfungsi di Chrome !!

Pastikan ini di dalam tag kepala:

<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>
Bekerja
sumber
3
Ini solusi yang sangat bagus! Menghapus margin dan menghapus header dan footer. Satu-satunya perubahan saya adalah kemudian menambahkan padding: 0.25in 0.5in;ke gaya tubuh sehingga saya memiliki margin yang tepat yang saya butuhkan untuk cetakan yang bagus dan bersih. Bekerja di Chrome v25, dan untungnya untuk proyek khusus ini kami dapat meminta pengguna akhir untuk memilih dari beberapa browser modern.
Charlie Schliesser
2
Sayangnya ini menyebabkan masalah dengan cetakan multi-halaman. Teks di bagian bawah halaman akan terpotong.
Jonathan
Berfungsi sempurna di Chrome 67.0.3396.99 dan Firefox 62.0b5 dengan output satu halaman.
killscreen
16

Saya memiliki permintaan serupa dari klien yang ingin agar header, nomor halaman, dan footer html dihapus. Dalam hal ini, klien menyajikan halaman HTML yang dapat berfungsi ganda sebagai sertifikat formal. URL, halaman, dan tajuk yang ditambahkan tidak relevan dan mengarah pada produk akhir yang kurang menyenangkan. Dalam beberapa hal, itu hanya terlihat murah.

Media = Print belum dapat menonaktifkan default browser ini. Satu-satunya solusi adalah memberi tahu pengguna untuk mengklik tombol "Gear" dan mengaktifkan / menonaktifkan item-item tersebut. Serius, saya tidak tahu saya bisa melakukan itu selama 20 tahun (dan kami pikir pengguna biasa akan memiliki petunjuk untuk mengklik tombol sakelar?).

Jika CSS mendukung Media = Cetak, itu harus mendukung kemampuan untuk mengontrol seluruh pengalaman cetak pengguna akhir. Saya menghargai bahwa browser menyediakan bidang yang ditambahkan, tetapi, mengapa tidak mengizinkan CSS untuk mengontrol keseluruhan pengalaman cetak-jika itu yang diinginkan. Solusi 90% bisa 100% dengan tiga bidang lagi! Sederhana:

#BrowserPrintDefaults{display:none}

sudah cukup.

Sekali lagi, bukan masalah apakah pengguna akhir ingin mencetaknya atau tidak (mungkin klien Anda sangat pribadi dan tidak ingin URL yang dicetak mengambang. Atau mungkin tim eksekutif menggunakan situs kolaborasi pribadi?). Senang membela pengguna akhir, tetapi jika seseorang mencari jawaban, jangan menjawab mengatakan itu adalah hak pengguna akhir untuk menunjukkan atau menyembunyikan. Kadang-kadang itu adalah hak klien membayar tagihan.

CAL
sumber
Saya akhirnya menyerah, sebanyak yang saya tidak mau. Saya setuju ini harus diekspos dalam CSS, karena semua browser memiliki pengaturan ini dan itu adalah elemen presentasi. Tetapi ini adalah adegan sebagai preferensi tingkat aplikasi, seperti mematikan cookie.
Anthony
1
Ini adalah standar CSS resmi menggunakan @Pagearahan untuk mengatur margin printer (yang tidak sama dengan margin tubuh dari halaman html). Saat ini didukung oleh semua browser utama kecuali Safari, tetapi bagaimana pengaruhnya terhadap header / footer bervariasi. Implementasi terbaik ada di Opera dan Chrome.
awe
6

Coba kode ini, berfungsi 100% untuk saya:
UNTUK Lansekap:

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

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

</style>
</head>

UNTUK Portait:

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

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

</style>
</head>
Iyes boy
sumber
1
Aturan halaman CSS akan mengatur margin, tetapi jangan menghapus header dan footer built-in yang ditempatkan oleh browser (URL halaman, nomor halaman, dll)
Anthony
0

Karena Anda menyebutkan "di dalam peramban mereka" dan firefox, jika Anda menggunakan Internet Explorer, Anda dapat menonaktifkan header halaman / footer dengan mengatur sementara nilai dalam registri, lihat di sini untuk contoh. AFAIK Saya belum pernah mendengar cara untuk melakukan ini di browser lain. Baik jawaban Daniel dan Mickel tampaknya saling bertabrakan, saya kira mungkin ada pengaturan serupa di suatu tempat di registri untuk firefox untuk menghapus header / footer atau menyesuaikannya. Sudahkah Anda memeriksanya?

Semoga ini bisa membantu dan Selamat liburan, Salam, Tom.

t0mm13b
sumber
1
Di IE7 +, Anda dapat menonaktifkan header / footer dengan klik tombol sederhana di Print Preview. Tidak perlu melakukannya di registri!
awe
0

@halaman margin: 0mm sekarang berfungsi di Firefox 19.0a2 (2012-12-07).

lebih tebal
sumber
0

Saya memecahkan masalah saya menggunakan beberapa css ke halaman web.

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

Ini bekerja untuk saya dengan margin sekitar 1cm

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