Margin saat mencetak halaman html

145

Saya menggunakan lembar gaya terpisah untuk pencetakan. Apakah mungkin untuk mengatur margin kanan dan kiri dalam style-sheet yang mengatur margin cetak (yaitu margin di atas kertas).

Terima kasih.

Kobra
sumber

Jawaban:

253

Anda harus menggunakan cmatau mmsebagai unit saat Anda menentukan untuk pencetakan. Menggunakan piksel akan menyebabkan browser menerjemahkannya menjadi sesuatu yang mirip dengan tampilannya di layar. Menggunakan cmatau mmakan memastikan ukuran kertas yang konsisten.

body
{
  margin: 25mm 25mm 25mm 25mm;
}

Untuk ukuran font, gunakan ptuntuk media cetak.

Perhatikan bahwa mengatur margin pada bodi dalam gaya css tidak akan menyesuaikan margin di driver printer yang menentukan area cetak printer, atau margin dikontrol oleh browser (dapat disesuaikan dalam pratinjau cetak di beberapa browser) ... hanya akan mengatur margin pada dokumen di dalam area yang dapat dicetak.

Anda juga harus menyadari bahwa IE7 ++ secara otomatis menyesuaikan ukuran agar paling sesuai, dan menyebabkan semuanya menjadi salah meskipun Anda menggunakan cmatau mm. Untuk mengesampingkan perilaku ini, pengguna harus memilih 'Pratinjau cetak' dan kemudian mengatur ukuran cetak ke 100%(standarnya Shrink To Fit).

Pilihan yang lebih baik untuk kontrol penuh pada margin yang dicetak adalah dengan menggunakan @pagepetunjuk untuk mengatur margin kertas, yang akan mempengaruhi margin pada kertas di luar elemen badan html, yang biasanya dikontrol oleh browser. Lihat http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
Ini saat ini berfungsi di semua browser utama kecuali Safari.
Di Internet explorer, margin sebenarnya disetel ke nilai ini dalam pengaturan untuk pencetakan ini, dan jika Anda melakukan Pratinjau, Anda akan mendapatkan ini sebagai default, tetapi pengguna dapat mengubahnya di pratinjau.

@page  
{ 
    size: auto;   /* auto is the initial value */ 

    /* this affects the margin in the printer settings */ 
    margin: 25mm 25mm 25mm 25mm;  
} 

body  
{ 
    /* this affects the margin on the content before sending to printer */ 
    margin: 0px;  
} 

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

perasaan kagum
sumber
3
Ini sekarang berfungsi di Chrome 18 dan IE9 (tidak menguji versi sebelumnya). Masih belum berfungsi di Firefox 12, tetapi Anda bisa melakukan deteksi sisi server dan menambahkan kelas tubuh <body class="firefox">sehingga di css Anda bisa melakukannya body.firefox {margin: 0mm; padding: 0.25in;}, itu sebenarnya margin 0,75 inci karena firefox sudah menambahkan 0,5 inci. Ini akan bekerja selama Anda membutuhkan margin> = 0,5 inci.
MrFusion
7
1 untuk @page! Itulah yang saya butuhkan, karena saya mencetak banyak halaman.
serangan udara
2
Sekarang bekerja dengan Firefox juga. Karena Firefox memiliki rutinitas pembaruan otomatis yang baik, ini seharusnya tidak menjadi masalah yang perlu kita atasi lagi. Saya telah menguji di IE, Opera, Chrome, Firefox dan Safari. Satu-satunya browser yang saat ini tidak berfungsi adalah Safari (versi 5.1.7 untuk Windows). Saya belum menguji di Mac.
kagum
1
Ini hanya menambahkan margin atas di halaman pertama. Solusi yang lebih baik untuk mengatur margin yang sama di semua halaman: stackoverflow.com/questions/37033766/…
besimple
@besimple: Lihat contoh bawah. Menggunakan perintah ´ @ page´ akan menambah margin pada setiap halaman.
kagum pada
45

Pertama-tama, saya mencoba memaksa semua pengguna saya untuk menggunakan Chrome saat mencetak karena browser lain membuat tata letak yang berbeda.

Jawaban dari pertanyaan ini merekomendasikan:

@page {
  size: 210mm 297mm; 
  /* Chrome sets own margins, we change these printer settings */
  margin: 27mm 16mm 27mm 16mm; 
}

Namun, saya akhirnya menggunakan CSS ini untuk semua halaman saya yang akan dicetak:

@media print 
{
    @page {
      size: A4; /* DIN A4 standard, Europe */
      margin:0;
    }
    html, body {
        width: 210mm;
        /* height: 297mm; */
        height: 282mm;
        font-size: 11px;
        background: #FFF;
        overflow:visible;
    }
    body {
        padding-top:15mm;
    }
}



Kasus khusus: Meja Panjang

Ketika saya perlu mencetak tabel di beberapa halaman, margin:0dengan @pageitu mengarah ke tepi yang berdarah:

tepi berdarah

Saya bisa menyelesaikan ini berkat jawaban ini dengan:

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }

Ditambah pengaturan margin atas-bawah untuk @page:

@page { 
    size: auto;
    margin: 20mm 0 10mm 0;
}
body {
    margin:0;
    padding:0;
}

Hasil:

memecahkan tepi berdarah

Saya lebih suka solusi yang ringkas dan berfungsi dengan semua browser. Untuk saat ini, semoga informasi di atas dapat membantu beberapa developer yang mengalami masalah serupa.

Kai Noack
sumber
1
Solusi Anda terbukti sangat berharga saat bekerja dengan pencetakan laporan menggunakan ERPNext. Saya dapat mengembangkan format cetak kustom saya sendiri dengan mudah dan petunjuk ini sangat membantu!
Tropicalrambler
10

Diperbarui, Solusi Sederhana

@media print {
   body {
       display: table;
       table-layout: fixed;
       padding-top: 2.5cm;
       padding-bottom: 2.5cm;
       height: auto;
   }
}

Solusi Lama

Buat bagian dengan setiap halaman, dan gunakan kode di bawah ini untuk menyesuaikan margin, tinggi dan lebar.

Jika Anda mencetak ukuran A4.

Kemudian pengguna

Ukuran: 8,27 inci dan 11,69 inci

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}



div.Section1 {
    page: Section1;
} 

lalu buat div dengan semua konten Anda di dalamnya.

<div class="Section1"> 
    type your content here... 
</div>
Pir Abdul
sumber
Ini tidak berfungsi untuk saya di Chrome atau FF. Juga, class=Section1seharusnya class="Section1".
nu everest
Ini adalah solusi yang lebih sederhana: stackoverflow.com/questions/37033766/…
besimple
9

Saya pribadi menyarankan untuk menggunakan unit pengukuran yang berbeda dari px. Saya tidak berpikir bahwa piksel memiliki banyak relevansi dalam hal cetak; idealnya Anda akan menggunakan:

  • poin (pt)
  • sentimeter (cm)

Saya yakin ada yang lain, dan satu artikel bagus tentang print-css dapat ditemukan di sini: Going to Print , oleh Eric Meyer .

David mengatakan kembalikan Monica
sumber
1
Anda benar yang pxtidak memiliki banyak relevansi untuk dicetak. Namun browser "menerjemahkan" unit piksel sehingga terlihat mirip dengan tampilannya di layar. Itu tidak menggunakan "titik resolusi printer" sebagai piksel (terima kasih Tuhan ...).
kagum
1

Saya juga merekomendasikan pt versus cm atau mm karena lebih tepat. Juga, saya tidak bisa membuat @page berfungsi di Chrome (versi 30.0.1599.69 m) Ini mengabaikan apa pun yang saya taruh untuk margin, besar atau kecil. Tapi, Anda bisa membuatnya bekerja dengan margin tubuh pada dokumen, aneh.

tangan besi
sumber
0

Jika Anda mengetahui ukuran kertas target, Anda dapat menempatkan konten Anda dalam DIV dengan ukuran spesifik tersebut dan menambahkan margin ke DIV tersebut untuk mensimulasikan margin cetak. Sayangnya, saya tidak yakin Anda memiliki kontrol ekstra atas fungsionalitas cetak selain hanya menampilkan kotak dialog cetak.

jonjbar.dll
sumber
Terima kasih. Apakah tidak mungkin untuk menentukan biarkan x piksel di kiri dan kanan terlepas dari ukuran kertas. Salam
kobra
1
Saya kira ini mungkin terjadi jika Anda mengatur ukuran DIV orang tua Anda menjadi 100% dan menambahkan margin piksel kapak ke dalamnya.
jonjbar