Google Chrome Yazdırma Sayfa Sonları

110

Sayfa sonları için Google Chrome'u almaya çalışıyorum.

Chrome'da page-break-after: always;geçerli olan bir grup web sitesi aracılığıyla bana söylendi , ancak çok basit bir örnekle bile çalışmasını sağlayamıyorum. krom olarak yazdırırken sayfa sonunu zorlamanın bir yolu var mı?

css printing google-chrome

— Mike Valstar
kaynak

Bunun nispeten yakın zamanda (Şubat 2014) webkit hata izleyicide tartışıldığı (eski bir 2005 hata fişinde) bugs.webkit.org/show_bug.cgi?id=5097

— Alex KeySmith

134

Aşağıdaki yaklaşımı Chrome dahil tüm büyük tarayıcılarda başarıyla kullandım:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>
    <div class="page">
      <h1>This is Page 2</h1>
    </div>
    <div class="page">
      <h1>This is Page 3</h1>
    </div>
  </body>
</html>

Bu basitleştirilmiş bir örnektir. Gerçek kodda, her div sayfası çok daha fazla öğe içerir.

— Phil Ross
kaynak

4

Ah sanırım sorunumu görüyorum. Onu bir <br/> etiketiyle kullanmaya çalışıyordum

— Mike Valstar

@Mike Sorunu benim için cevapladığınız için teşekkürler. Bir br neden çalışmıyor ve bir div çalışıyor emin değilim, ancak yine de kolay bir değişiklik.

— Jeff Davis

bu, üst sayfayla kullanmayı denediğinizde çalışır, ancak iframe'den yazdırdığınızda çalışmaz (tabii ki kromda).

— VJ

Ayrıca @ peter'in aşağıdaki yanıtını da okuyun; o da iyi bir noktaya sahipti position: relative.

— doub1ejack

6

Spesifikasyona göre break-afterve break-beforeyalnızca şuna uygulayın block-level elements, table row groups, table rows (but see prose): drafts.csswg.org/css-break-3/#break-between - bu, kayan nokta veya süslü konumlandırma hileleri olmadığı anlamına gelir.

— Mikko Rantalainen

35

Aslında kabul edilen cevapta (Phil Ross'tan) bir detay eksik ...

o YAPAR Chrome'da çalışmalarını ve çözüm gerçekten saçma !!

Sayfa sonunu kontrol etmek istediğiniz hem üst öğe hem de öğe şu şekilde bildirilmelidir:

position: relative

bu kemana bir göz atın: http://jsfiddle.net/petersphilo/QCvA5/5/show/

Bu aşağıdakiler için geçerlidir:

page-break-before
page-break-after
page-break-inside

Ancak, Safari'de sayfa sonunu kontrol etmek işe yaramıyor (en azından 5.1.7'de)

Umarım bu yardımcı olur!!!

Not: Aşağıdaki soru, Chrome'un son sürümlerinin, şu konumla bile artık buna saygı duymadığı gerçeğini ortaya çıkarmıştır: göreli; hile. Ancak, saygı duyuyor gibi görünüyorlar:

-webkit-region-break-inside: avoid;

bu kemana bakın: http://jsfiddle.net/petersphilo/QCvA5/23/show

sanırım bunu şimdi eklememiz gerekiyor ...

Bu yardımcı olur umarım!

— Peter
kaynak

Chrome'da çalışıp çalışmayacağı kullanılan WebKit sürümüne bağlıdır. Safari 5.1.7'de çalışmadığını kendiniz söylediniz, bu yüzden bunun aptalca olduğunu düşünmüyorum. Test ettikleri WK sürümü, test ettiğinizden farklı olabilir.

— Joel Peltonen

Bu sayfa Chrome 26.0.1410.65'te çalışmıyor, 3 sayfa alıyorum ve sonuncunun üzerinde sadece bir kelime var). Ayrıca hem kuralı uygulamak istediğim öğenin hem de üst öğesinin kendi sayfama göre konumu olduğundan emin olmayı denedim, ancak yine de yazdırırken sayfa sonunu eklemiyor. Peki bu, Chrome'da gelen ve giden bir özellik mi?

— Joe Dyndale

Haklısın .... Chrome'un son sürümlerinde çalışmıyor gibi görünüyor; ancak, bunu şu şekilde değiştirebilirsiniz: -webkit-region-break-inside: escape; (buna bakın: jsfiddle.net/QCvA5/22/show )

— Peter

@Peter Burada herhangi bir güncelleme var mı? Bounty ile kullandığım bir durumu düzeltmeye çalışan bir SO sorusu gönderdimpage-break-inside . Herhangi bir yardım?

— Zach Saucier

1

Bu benim için bir tuhaflıkla çalıştı - yalnızca stili satır içine koyarsam işe yarıyor, ayrı css dosyasında değil. Bir h7 elemanı üzerinde kullanıyorum. Chrome sürümü 38.0.2125.111 m'dir.

<h7 class="page-breaker" style="display: block;position: relative;page-break-before:always">Grade <?php echo $grade;?></h7>

— Gavin Simpson

16

Burada Chrome'un kayan div'lerde sayfa sonu- * css ayarlarını da yok saydığını belirtmek isterim.

Bunun için css spesifikasyonunda bir yerde sağlam bir gerekçe olduğundan şüpheleniyorum, ancak bir gün birine yardımcı olabileceğine dikkat ettim ;-)

Bir başka not: IE7, önceki blok öğesinde açık bir yükseklik olmadan sayfa sonu ayarlarını onaylayamaz:

http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/

— fordareh
kaynak

2

Muhtemelen, bir öğeyi yüzdürmek, onu kesinlikle konumlandırmakla aynı şekilde belge akışından çıkarır. Konum: mutlak olan öğeler, sayfa sonu- * ile çalışmaz.

— Joe Dyndale

1

Ayrıca: sayfa sonu stiline sahip öğenin tüm üst öğeleri arasında herhangi bir kayan veya mutlak konumlandırılmış öğe olmamalıdır. Önyükleme "col-xs-12" ebeveynim vardı, ona açıkça "float: none" ayarladığımda, sayfa sonu çalışmaya başladı!

— Stalinko

12

Buna benzer bir sorun yaşadım ama sonunda çözümü buldum. Ben taşma-x: hidden; <html> etiketine uygulandı, bu nedenle aşağıda DOM'da ne yaptıysam da sayfa sonlarına asla izin vermiyordu. Overflow-x: visible'a dönerek ; iyi çalıştı.

Umarım bu dışarıdaki birine yardımcı olur.

— davidbehan
kaynak

Belirli taşma özelliklerine sahip herhangi bir üst öğenin bu sorunlara neden olabileceğini unutmayın. Sadece kuralı ekledim * { overflow-x: visible }.

— Garrett

10

Bu sorunu kendim yaşıyorum - sayfa sonlarım Chrome dışında her tarayıcıda çalışıyor - ve bunu bir tablo hücresinin içinde bulunan sayfa sonu öğesine indirgeyebildim. (CMS'de eski, devralınan şablonlar.)

Görünüşe göre Chrome, tablo hücrelerinde önceki sayfa sonu veya sonra sayfa sonu özelliklerini dikkate almıyor, bu nedenle Phil'in örneğinin bu değiştirilmiş sürümü ikinci ve üçüncü başlığı aynı sayfaya koyuyor:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>

    <table>
    <tr>
        <td>
            <div class="page">
              <h1>This is Page 2</h1>
            </div>
            <div class="page">
              <h1>This is, sadly, still Page 2</h1>
            </div>
        </td>
    </tr>
    </table>
  </body>
</html>

CSS spesifikasyonuna göre Chrome'un uygulanmasına (şüpheli bir şekilde) izin verilir - burada daha fazlasını görebilirsiniz: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=tr

— Nate Cook
kaynak

Bu benim sorunumdu - SharePoint 2007 tarafından mizanpaj için tablo hücrelerini kullanmaya zorlandı, bu nedenle Chrome herhangi bir baskı stili sayfa düzeni bildirimine uyuyordu :(

— Dexter

8

CSS'ye dikkat edin: display:inline-blockyazdırırken.

Tablom stile sahip bir div içinde olsaydı, sonraki sayfaya gidecek CCS özelliğinin hiçbiri Chrome ve Firefox'ta çalışmazdı display:inline-block

Örneğin, aşağıdakiler çalışmaz:

<div style='display:inline-block'>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>

Ancak şu çalışma:

<div>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>

— Gudradain
kaynak

1

Ve aynı zamanda "yüzer". Üst öğelerde herhangi bir "float" özelliği olmamalıdır.

— Jimba Tamang

2

Aynıdisplay: flex

— Michael Schmid

4

Bu sorunla daha önce Chrome'da karşılaştım ve bunun nedeni, bir div'in minimum yüksekliği bir değere ayarlanmış olmasıydı. Çözüm, yazdırırken minimum yüksekliği aşağıdaki gibi sıfırlamaktı:

@media print {
    .wizard-content{
        min-height: 0;
    }
}

— Hamdy Ahmed
kaynak

3

2016 güncellemesi:

Peki, bu sorunu yaşadığımda

overflow:hidden

benim div.

Yaptıktan sonra

@media print {
   div {
      overflow:initial !important
   }
}

her şey iyi ve mükemmel oldu

— x0 z1
kaynak

1

Bu, başka hiçbir şey yapmadığında sorunu çözdü. Teşekkürler!

— bstory

1

Chrome'u Bootstrap Css ile kullanıyorsanız, ızgara düzenini kontrol eden sınıflar, örneğin col-xs-12 vb. "Float: left" kullanır; bu, diğerlerinin de belirttiği gibi, sayfa sonlarını bozar. Bunları yazdırmak için sayfanızdan çıkarın. Benim için çalıştı. (Chrome sürümünde = 49.0.2623.87)

— Astra Ayı
kaynak

0

O sorunu var. Çok uzun zaman geçti ... Sayfanın yan alanları olmadan kırılma normaldir, ancak alanlar göründüğünde sayfa ve "sayfa sonu alanı" ölçeklenir. Yani normal bir alanla, bir belge içinde yanlış gösteriliyordu. Set ile düzeltirim

    width:100%

ve kullan

div.page
  {
    page-break-before: always;
    page-break-inside: avoid;
  }

İlk satırda kullanın.

— Intey
kaynak

0

Bildiğim kadarıyla Google Chrome ile tablolarda doğru sayfa sonlarını almanın tek yolu <tr>, özelliği görüntülenen öğeye vermektir : inline-table (veya display: inline-block, ancak tablo olmayan diğer durumlarda daha iyi uyuyor ). Ayrıca "page-break-after: always; page-break-inside: escape;" özellikleri kullanılmalıdır. @Phil Ross tarafından yazıldı.

<table>
  <tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
    <td></td>
    <td></td>
    ...
  </tr>
</table>

— Codekraft
kaynak

1

Bunun tds içindeki marjı / dolguyu bozmaması için herhangi bir ipucu var mı?

— joeforker

@joeforker <tr> 'yi "padding: 0; margin: 0;" ile kullanmalısınız ve marj özelliklerini içindeki öğelere verin.

— Codekraft

-2

Şu gibi dolgu kullandığımda benim için çalışıyordu:

<div style="padding-top :200px;page-break-inside:avoid;">
   <div>My content</div>
</div>

— Tuvia Khusid
kaynak

Bu yalnızca dolgu nedeniyle işe yaradı ve sayfa sonu nedeniyle değil

— Char