Pencetakan lanskap dari HTML

Saya punya laporan HTML, yang perlu dicetak lansekap karena banyak kolom. Apakah ada cara untuk melakukan ini, tanpa pengguna harus mengubah pengaturan dokumen?

Dan apa saja opsi di antara browser.

Di CSS Anda, Anda dapat mengatur properti @page seperti yang ditunjukkan di bawah ini.

@media print{@page {size: landscape}}

Halaman @ adalah bagian dari spesifikasi CSS 2.1 namun ini sizetidak disorot oleh jawaban untuk pertanyaan Apakah @ Halaman {size: landscape} usang? :

CSS 2.1 tidak lagi menentukan atribut ukuran. Draf kerja saat ini untuk modul Media P3 CSS3 tidak menentukan itu (tapi ini bukan standar atau diterima)

Sebagaimana dinyatakan opsi ukuran berasal dari Spesifikasi Draft CSS 3 . Secara teori dapat diatur ke ukuran halaman dan orientasi meskipun dalam sampel saya ukurannya dihilangkan.

Dukungan sangat dicampur dengan laporan bug mulai diajukan di firefox , sebagian besar browser tidak mendukungnya.

Ini mungkin terlihat berfungsi di IE7 tetapi ini karena IE7 akan mengingat pilihan terakhir landscape atau portrait pengguna dalam pratinjau cetak (hanya browser yang dimulai kembali).

Artikel ini memang memiliki beberapa karya yang disarankan menggunakan JavaScript atau ActiveX yang mengirim kunci ke browser pengguna meskipun mereka tidak ideal dan bergantung pada mengubah pengaturan keamanan browser.

Bergantian Anda dapat memutar konten daripada orientasi halaman. Hal ini dapat dilakukan dengan membuat gaya dan menerapkannya ke tubuh yang mencakup dua garis ini tetapi ini juga menarik untuk menciptakan banyak masalah pelurusan dan tata letak.

<style type="text/css" media="print">
    .page
    {
     -webkit-transform: rotate(-90deg); 
     -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
</style>

Alternatif terakhir yang saya temukan adalah membuat versi lanskap dalam PDF. Anda dapat menunjuk ke sana ketika pengguna memilih untuk mencetaknya mencetak PDF. Namun saya tidak bisa mendapatkan ini untuk pekerjaan cetak otomatis di IE7.

<link media="print" rel="Alternate" href="print.pdf">

Kesimpulannya di beberapa browser itu relatif mudah menggunakan opsi ukuran halaman tetapi dalam banyak browser tidak ada cara pasti dan itu akan tergantung pada konten dan lingkungan Anda. Ini mungkin mengapa Google Documents membuat PDF ketika cetak dipilih dan kemudian memungkinkan pengguna untuk membuka dan mencetaknya.

Solusi saya:

<style type="text/css" media="print">
    @page { 
        size: landscape;
    }
    body { 
        writing-mode: tb-rl;
    }
</style>

Ini berfungsi IE, FirefoxdanChrome

Tidak cukup hanya dengan memutar konten halaman. Berikut ini adalah CSS kanan yang berfungsi di sebagian besar browser (Chrome, Firefox, IE9 +).

Setel tubuh pertama marginke 0, karena jika tidak, margin halaman akan lebih besar daripada yang Anda atur dalam dialog cetak. Juga atur backgroundwarna untuk memvisualisasikan halaman.

body {
  margin: 0;
  background: #CCCCCC;
}

margin, borderdan backgrounddiminta untuk memvisualisasikan halaman.

paddingharus diatur ke margin cetak yang diperlukan. Dalam dialog cetak Anda harus mengatur margin yang sama (10mm dalam contoh ini).

div.portrait, div.landscape {
  margin: 10px auto;
  padding: 10mm;
  border: solid 1px black;
  overflow: hidden;
  page-break-after: always;
  background: white;
}

Ukuran halaman A4 adalah 210mm x 297mm. Anda perlu mengurangi margin cetak dari ukurannya. Dan atur ukuran konten halaman:

div.portrait {
  width: 190mm;
  height: 276mm;
}
div.landscape {
  width: 276mm;
  height: 190mm;
}

Saya menggunakan 276mm bukan 277mm, karena browser yang berbeda skala halamannya sedikit berbeda. Jadi beberapa dari mereka akan mencetak konten setinggi 277mm pada dua halaman. Halaman kedua akan kosong. Lebih aman menggunakan 276mm.

Kami tidak membutuhkan margin, border, padding, backgroundpada halaman yang dicetak, sehingga menghapusnya:

@media print {
  body {
    background: none;
    -ms-zoom: 1.665;
  }
  div.portrait, div.landscape {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
  div.landscape {
    transform: rotate(270deg) translate(-276mm, 0);
    transform-origin: 0 0;
  }
}

Perhatikan bahwa asal mula transformasi adalah 0 0! Juga konten halaman landscape harus dipindahkan 276mm ke bawah!

Juga jika Anda memiliki campuran halaman potret dan lanscape, IE akan memperkecil halaman. Kami memperbaikinya dengan menetapkan -ms-zoomke 1.665. Jika Anda mengaturnya menjadi 1,6666 atau sesuatu seperti ini, batas kanan konten halaman terkadang dapat dipotong.

Jika Anda perlu IE8- atau browser tua lainnya mendukung Anda dapat menggunakan -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). Tetapi untuk browser yang cukup modern, itu tidak diperlukan.

Ini adalah halaman pengujian:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      ...Copy all styles here...
    </style>
  </head>
  <body>
    <div class="portrait">A portrait page</div>
    <div class="landscape">A landscape page</div>
  </body>
</html>

Dikutip dari CSS-Diskusikan Wiki

Aturan @page telah dikurangi cakupannya dari CSS2 ke CSS2.1. Aturan lengkap CSS2 @ halaman dilaporkan hanya diterapkan di Opera (dan bahkan gagal). Pengujian saya sendiri menunjukkan bahwa IE dan Firefox sama sekali tidak mendukung @page. Menurut bagian spec CSS2 yang sekarang sudah usang 13.2.2 adalah mungkin untuk mengesampingkan pengaturan orientasi pengguna dan (misalnya) memaksa pencetakan dalam Landscape tetapi properti "size" yang relevan telah dihapus dari CSS2.1, konsisten dengan fakta bahwa tidak ada browser saat ini yang mendukungnya. Itu telah dipulihkan dalam modul Media Paged CSS3 tetapi perhatikan bahwa ini hanya Draft Kerja (pada Juli 2009).

Kesimpulan: lupakan @ halaman untuk saat ini. Jika Anda merasa dokumen Anda perlu dicetak dalam orientasi Landscape, tanyakan pada diri sendiri apakah Anda dapat membuat desain Anda lebih lancar. Jika Anda benar-benar tidak bisa (mungkin karena dokumen berisi tabel data dengan banyak kolom, misalnya), Anda harus memberi saran kepada pengguna untuk mengatur orientasi ke Lansekap dan mungkin menguraikan cara melakukannya di browser yang paling umum. Tentu saja, beberapa browser memiliki fitur print-to-width (shrink-to-fit) (misalnya Opera, Firefox, IE7) tetapi tidak disarankan untuk bergantung pada pengguna yang memiliki fasilitas ini atau mengaktifkannya.

Coba tambahkan ini CSS Anda:

@page {
  size: landscape;
}

The sizeproperti adalah apa yang Anda setelah seperti yang disebutkan. Untuk mengatur orientasi dan ukuran halaman Anda saat mencetak, Anda dapat menggunakan yang berikut ini:

/* ISO Paper Size */
@page {
  size: A4 landscape;
}

/* Size in mm */    
@page {
  size: 100mm 200mm landscape;
}

/* Size in inches */    
@page {
  size: 4in 6in landscape;
}

Berikut tautan ke dokumentasi @page .

Anda mungkin dapat menggunakan aturan CSS 2 @ halaman yang memungkinkan Anda untuk mengatur properti 'size' menjadi landscape .

Anda juga dapat menggunakan mode penulisan atribut - css atribut IE-saja

div.page    { 
   writing-mode: tb-rl;
}

-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

tidak bekerja di Firefox 16.0.2 tetapi berfungsi di Chrome

Saya membuat Dokumen MS kosong dengan pengaturan Lansekap dan kemudian membukanya di notepad. Menyalin dan menempelkan yang berikut ke halaman html saya

<style type="text/css" media="print">
   @page Section1
    {size:11 8.5in;
    margin:.5in 13.6pt 0in 13.6pt;
    mso-header-margin:.5in;
    mso-footer-margin:.5in;
    mso-paper-source:4;}
div.Section1
    {page:Section1;}
</style>



<div class="Section1"> put  text / images / other stuff  </div>

Pratinjau cetak menampilkan halaman dalam ukuran lanskap. Ini tampaknya berfungsi baik pada IE dan Chrome, tidak diuji pada FF.

Saya mencoba menyelesaikan masalah ini satu kali, tetapi semua penelitian saya mengarahkan saya ke kontrol / plug-in ActiveX. Tidak ada trik yang diizinkan oleh peramban (3 tahun yang lalu) untuk mengubah pengaturan cetak (jumlah salinan, ukuran kertas).

Saya berupaya keras untuk memperingatkan pengguna dengan hati-hati bahwa mereka perlu memilih "lansekap" ketika dialog cetak browser muncul. Saya juga membuat halaman "print preview", yang bekerja jauh lebih baik daripada IE6! Aplikasi kami memiliki tabel data yang sangat luas dalam beberapa laporan, dan pratinjau cetak membuatnya menjadi jelas bagi pengguna ketika tabel akan menumpahkan sisi kanan kertas (karena IE6 tidak dapat mengatasi pencetakan pada 2 lembar juga).

Dan ya, orang masih menggunakan IE6 bahkan sekarang.

<style type="text/css" media="print">
.landscape { 
    width: 100%; 
    height: 100%; 
    margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1); 
} 
</style>

Jika Anda ingin gaya ini diterapkan ke tabel maka buat satu tag div dengan kelas gaya ini dan tambahkan tag tabel dalam tag div ini dan tutup tag div di akhir.

Tabel ini hanya akan mencetak dalam lanskap dan semua halaman lainnya hanya akan mencetak dalam mode potret. Tetapi masalahnya adalah jika ukuran tabel lebih dari lebar halaman maka kita mungkin kehilangan beberapa baris dan terkadang header juga tidak terjawab. Hati-hati.

Semoga harimu menyenangkan.

Terima kasih, Naveen Mettapally.

Saya mencoba jawaban Denis dan mendapatkan beberapa masalah (halaman potret tidak dicetak dengan benar setelah halaman lanskap), jadi inilah solusi saya:

body {
  margin: 0;
  background: #CCCCCC;
}

div.page {
  margin: 10px auto;
  border: solid 1px black;
  display: block;
  page-break-after: always;
  width: 209mm;
  height: 296mm;
  overflow: hidden;
  background: white;
}

div.landscape-parent {
  width: 296mm;
  height: 209mm;
}

div.landscape {
  width: 296mm;
  height: 209mm;
}

div.content {
  padding: 10mm;
}

body,
div,
td {
  font-size: 13px;
  font-family: Verdana;
}

@media print {
  body {
    background: none;
  }
  div.page {
    width: 209mm;
    height: 296mm;
  }
  div.landscape {
    transform: rotate(270deg) translate(-296mm, 0);
    transform-origin: 0 0;
  }
  div.portrait,
  div.landscape,
  div.page {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
}

<div class="page">
  <div class="content">
    First page in Portrait mode
  </div>
</div>
<div class="page landscape-parent">
  <div class="landscape">
    <div class="content">
      Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
    </div>
  </div>
</div>
<div class="page">
  <div class="content">
    Third page in Portrait mode
  </div>
</div>

Ini juga bekerja untuk saya:

@media print and (orientation:landscape) { … }

Jika Anda ingin melihat lansekap di layar sebelum Anda mencetak, serta mencetak, maka di css Anda, Anda dapat mengatur lebarnya menjadi 900px, dan tingginya menjadi 612px.

OP tidak menyebutkan ukuran A4. Saya menganggap itu ukuran Surat di nomor saya di atas.

Anda dapat mencoba yang berikut ini:

@page {
    size: auto
}