HTML'den yatay baskı

Birçok sütun nedeniyle yatay yazdırılması gereken bir HTML rapor var. Kullanıcının belge ayarlarını değiştirmek zorunda kalmadan bunu yapmanın bir yolu var mı?

Ve tarayıcılar arasındaki seçenekler nelerdir.

CSS'nizde @page özelliğini aşağıda gösterildiği gibi ayarlayabilirsiniz.

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

@ Sayfası, CSS 2.1 spesifikasyonunun bir parçasıdır ancak bu size, @Page {size: landscape} modası geçmiş mi? Sorusunun cevabı ile vurgulanmamıştır. :

CSS 2.1 artık boyut niteliğini belirtmiyor. CSS3 Sayfalı Ortam modülü için geçerli çalışma taslağı bunu belirtir (ancak bu standart veya kabul edilmez).

Belirtildiği gibi, boyut seçeneği CSS 3 Taslak Spesifikasyonundan gelir . Teorik olarak, örneklemde boyut atlanmasına rağmen, hem sayfa boyutuna hem de yönüne ayarlanabilir.

Firefox'ta dosyalamaya başlayan bir hata raporu ile destek çok karışık , çoğu tarayıcı bunu desteklemiyor.

IE7'de çalışıyor gibi görünebilir, ancak bunun nedeni IE7'nin kullanıcıların baskı önizlemesinde son yatay veya dikey seçimini hatırlayacağıdır (sadece tarayıcı yeniden başlatılır).

Bu makalede , ideal olmamasına ve tarayıcıların güvenlik ayarlarını değiştirmesine rağmen, kullanıcıların tarayıcısına anahtarlar gönderen JavaScript veya ActiveX kullanarak önerilen bazı çalışmalar vardır.

Alternatif olarak, sayfa yönü yerine içeriği döndürebilirsiniz. Bu, bir stil oluşturarak ve bu iki satırı içeren gövdeye uygulayarak yapılabilir, ancak bunun aynı zamanda birçok hizalama ve düzen sorunu yaratan geri çekimleri vardır.

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

Bulduğum son alternatif, PDF'de bir yatay sürüm oluşturmaktır. Kullanıcı yazdırmayı seçtiğinde PDF'yi yazdırır. Ancak bunu IE7 otomatik yazdırma çalışması için alamadım.

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

Sonuç olarak, bazı tarayıcılarda @sayfa boyutu seçeneğini kullanmak görelilik kolaydır, ancak birçok tarayıcıda kesin bir yol yoktur ve içeriğinize ve ortamınıza bağlı olacaktır. Bu nedenle, Google Dokümanlar yazdırma seçildiğinde bir PDF oluşturur ve kullanıcının bunu açıp yazdırmasına izin verir.

Çözümüm:

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

Bu çalışır IE, FirefoxveChrome

Yalnızca sayfa içeriğini döndürmek yeterli değildir. İşte en çok tarayıcıda (Chrome, Firefox, IE9 +) çalışan doğru bir CSS.

İlk önce gövdeyi margin0 olarak ayarlayın , aksi takdirde sayfa kenar boşlukları yazdırma iletişim kutusunda ayarladığınızdan daha büyük olacaktır. Ayrıca backgroundsayfaları görselleştirmek için renk ayarlayın .

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

margin, borderve backgroundsayfaları görselleştirmek için gereklidir.

paddinggerekli yazdırma kenar boşluğuna ayarlanmalıdır. Yazdır iletişim kutusunda aynı kenar boşluklarını ayarlamanız gerekir (bu örnekte 10 mm).

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

A4 sayfasının boyutu 210mm x 297mm'dir. Yazdırma kenar boşluklarını boyuttan çıkarmanız gerekir. Ve sayfa içeriğinin boyutunu ayarlayın:

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

Farklı tarayıcılar sayfaları biraz farklı ölçeklendirdiğinden, 277 mm yerine 276 mm kullanıyorum. Bazıları 277 mm yüksekliğinde içeriği iki sayfaya yazdıracak. İkinci sayfa boş olacaktır. 276mm kullanmak daha güvenlidir.

Biz herhangi bir ihtiyacımız yok margin, border, padding, backgroundböylece bunları kaldırmak, yazdırılan sayfada:

@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;
  }
}

Dönüşümün kökeni olduğunu unutmayın 0 0! Ayrıca yatay sayfaların içeriği 276 mm aşağı kaydırılmalıdır!

Ayrıca portre ve peyzaj sayfalarının bir karışımı varsa IE sayfaları uzaklaştırır. -ms-zoom1.665 olarak ayarlayarak düzeltiyoruz. 1.6666 veya bunun gibi bir şeye ayarlarsanız, sayfa içeriğinin sağ kenarlığı bazen kırpılabilir.

Eğer IE8- gerek ya da diğer eski tarayıcıları kullanabilirsiniz desteklerse -webkit-transform, -moz-transform,filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3) . Ancak yeterince modern tarayıcılar için gerekli değildir.

İşte bir test sayfası:

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

Alıntı sahibi CSS-Discuss Wiki

@Page kuralı, kapsam olarak CSS2'den CSS2.1'e düşürüldü. Tam CSS2 @ sayfası kuralının yalnızca Opera'da (ve o zaman bile buggily) uygulandığı bildirildi. Kendi testlerim IE ve Firefox'un @ sayfasını hiç desteklemediğini gösteriyor. Şimdi eskimiş olan CSS2 spec bölüm 13.2.2'ye göre, kullanıcının Manzara'daki yönelim ayarını ve (örneğin) baskı baskısını geçersiz kılmak mümkündür, ancak ilgili "boyut" özelliği, gerçeğe uygun olarak CSS2.1'den çıkarılmıştır. mevcut tarayıcının desteklemediğini. CSS3 Paged Media modülüne eski haline getirildi, ancak bunun sadece bir Çalışma Taslağı olduğuna dikkat edin (Temmuz 2009'da olduğu gibi).

Sonuç: şu an için @sayfayı unutun. Belgenizin Yatay yönde yazdırılması gerektiğini düşünüyorsanız, tasarımınızı daha akıcı hale getirip getiremeyeceğinizi kendinize sorun. Gerçekten yapamıyorsanız (örneğin, belgede çok sayıda sütun içeren veri tabloları bulunduğundan), kullanıcıya yönlendirmeyi Yatay olarak ayarlamasını ve belki de en yaygın tarayıcılarda nasıl yapılacağını ana hatlarıyla bildirmeniz gerekir. Tabii ki, bazı tarayıcılarda bir baskı sığdır (sığdır-küçült) özelliği vardır (örneğin Opera, Firefox, IE7), ancak bu tesise sahip olan veya açık olan kullanıcılara güvenmek tavsiye edilmez.

Bunu CSS'nizi eklemeyi deneyin:

@page {
  size: landscape;
}

sizeÖzelliği belirtildiği gibi peşindeler şeydir. Yazdırırken sayfanızın yönünü ve boyutunu ayarlamak için aşağıdakileri kullanabilirsiniz:

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

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

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

İşte @page belgelerine bir bağlantı .

'Size' özelliğini yatay olarak ayarlamanıza izin veren CSS 2 @ sayfası kuralını kullanabilirsiniz .

Standart olmayan yalnızca IE için css niteliği yazma modunu da kullanabilirsiniz

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

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

Firefox 16.0.2'de çalışmıyor ancak Chrome'da çalışıyor

Yatay ayarlı boş bir MS Belgesi oluşturdum ve sonra not defterinde açtım. Aşağıdaki kopyalandı ve html sayfama yapıştırıldı

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

Baskı önizleme sayfaları yatay boyutta gösterir. Bu FF üzerinde test edilmemiş IE ve Chrome'da iyi çalışıyor gibi görünüyor.

Bu sorunu bir kez çözmeye çalıştım, ancak tüm araştırmalarım beni ActiveX denetimlerine / eklentilerine yönlendirdi. Tarayıcıların (3 yıl önce zaten) herhangi bir yazdırma ayarını (kopya sayısı, kağıt boyutu) değiştirmesine izin verdiği bir hile yoktur.

Çabaları tarayıcı yazdırma iletişim kutusu görüntülendiğinde "manzara" seçmeleri gerektiğini dikkatle uyarıyorum. Ayrıca, IE6'nın yaptığından çok daha iyi çalışan bir "baskı önizleme" sayfası oluşturdum! Uygulamamız bazı raporlarda çok geniş veri tablolarına sahipti ve baskı önizlemesi, tablonun kağıdın sağ kenarından ne zaman döküleceğini (IE6 ya da 2 kağıda yazdırma ile başa çıkamadığından) kullanıcılara açıkça gösterdi.

Ve evet, insanlar şu an bile IE6 kullanıyor.

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

Bu stilin bir tabloya uygulanmasını istiyorsanız, bu stil sınıfıyla bir div etiketi oluşturun ve bu div etiketine tablo etiketini ekleyin ve sonunda div etiketini kapatın.

Bu tablo yalnızca yatay olarak yazdırılır ve diğer tüm sayfalar yalnızca dikey modda yazdırılır. Ancak sorun, tablo boyutu sayfa genişliğinden fazlaysa, bazı satırları kaybedebiliriz ve bazen üstbilgiler de kaçırılır. Dikkatli ol.

İyi günler.

Teşekkürler, Naveen Mettapally.

Denis'in cevabını denedim ve bazı sorunlara çarptım (yatay sayfalar gittikten sonra portre sayfaları düzgün yazdırılmadı), işte benim çözümüm:

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>

Bu benim için de işe yaradı:

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

Yazdırmadan önce ekranda manzarayı görmek ve yazdırmak istiyorsanız, css'nizde genişliği 900 piksel ve yüksekliği 612 piksel olarak ayarlayabilirsiniz.

OP A4 boyutundan bahsetmedi. Yukarıdaki rakamlarımda bunun Letter boyutunda olduğunu düşünüyorum.

Aşağıdakileri deneyebilirsiniz:

@page {
    size: auto
}