Google Chrome प्रिंटिंग पेज टूट जाता है

110

मैं पेज ब्रेक करने के लिए google chrome पाने की कोशिश कर रहा हूँ।

मुझे वेबसाइटों के एक समूह के माध्यम से बताया गया page-break-after: always;है जो क्रोम में मान्य है लेकिन मैं इसे बहुत सरल उदाहरण के साथ भी काम नहीं कर पा रहा हूं। क्या क्रोम में छपाई करते समय पृष्ठ को तोड़ने के लिए बाध्य करने का कोई तरीका है?

css printing google-chrome

— माइक वालस्टार
स्रोत

ऐसा प्रतीत होता है कि यह अपेक्षाकृत हाल ही में (फरवरी 2014) चर्चा की गई है (एक पुराने 2005 बग टिकट पर) webkit Bug

— एलेक्स कीस्मिथ

134

मैंने क्रोम सहित सभी प्रमुख ब्राउज़रों में निम्नलिखित दृष्टिकोण का सफलतापूर्वक उपयोग किया है:

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

यह एक सरलीकृत उदाहरण है। वास्तविक कोड में, प्रत्येक पृष्ठ div में कई और तत्व होते हैं।

— फिल रॉस
स्रोत

4

मुझे लगता है कि मैं अपनी समस्या देखता हूं। मैं इसे <br/> टैग

— माइक वैलस्टार

@ मेरे लिए समस्या का जवाब देने के लिए धन्यवाद। यकीन नहीं है कि क्यों एक ब्रा काम नहीं करता है और एक div करता है, लेकिन फिर भी एक आसान बदलाव नहीं है।

— जेफ डेविस

जब आप मूल पृष्ठ के साथ उपयोग करने का प्रयास करते हैं तो यह काम करता है, लेकिन जब आप आइफ्रेम (क्रोम में, निश्चित रूप से) से प्रिंट करते हैं तो यह काम नहीं करता है।

— वीजे

नीचे दिए गए @ पीटर के उत्तर को भी पढ़ें; उसके बारे में भी अच्छी बात थी position: relative।

— 20:

6

कल्पना के अनुसार break-afterऔर break-beforeकेवल इस पर लागू करें block-level elements, table row groups, table rows (but see prose): draft.csswg.org/css-break-3/#break-between - जिसका अर्थ है कोई फ़्लोट या कोई फैंसी पोजिशनिंग ट्रिक्स नहीं।

— मिकको रैंटलैनेन

34

दरअसल एक विवरण उस उत्तर से गायब है जिसे स्वीकार किया जाता है (फिल रॉस से) के रूप में चुना गया है ...।

यह क्रोम में काम करता है , और समाधान वास्तव में मूर्खतापूर्ण है !!

माता-पिता और तत्व, जिस पर आप पृष्ठ-विराम को नियंत्रित करना चाहते हैं, को निम्न के रूप में घोषित किया जाना चाहिए:

position: relative

इस फिडेल को देखें: http://jsfiddle.net/petersphilo/QCvA5/5/show/

यह सच है:

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

हालाँकि, सफारी में पेज-ब्रेक-इन को नियंत्रित करना काम नहीं करता है (5.1.7 में, कम से कम)

आशा है कि ये आपकी मदद करेगा!!!

पुनश्च: नीचे दिया गया प्रश्न यह तथ्य लाता है कि क्रोम के हाल के संस्करण अब इस स्थिति का सम्मान नहीं करते हैं, यहां तक कि स्थिति के साथ: रिश्तेदार; छल। हालांकि, वे सम्मान करते हैं:

-webkit-region-break-inside: avoid;

इस फिडेल को देखें: http://jsfiddle.net/petersphilo/QCvA5/23/show

इसलिए मुझे लगता है कि हमें अब जोड़ना होगा ...

उम्मीद है की यह मदद करेगा!

— पीटर
स्रोत

यह क्रोम में काम करता है या नहीं, इसके लिए उपयोग किए जाने वाले वेबकिट के संस्करण पर निर्भर करता है। आपने स्वयं कहा था कि यह सफारी 5.1.7 में काम नहीं करता है, इसलिए मुझे नहीं लगता कि यह मूर्खतापूर्ण है। WK का संस्करण जो उन्होंने परीक्षण किया, वह आपके परीक्षण से भिन्न हो सकता है।

— जोएल पेल्टनन

वह पृष्ठ Chrome 26.0.1410.65 में काम नहीं करता है, मुझे 3 पृष्ठ मिलते हैं और अंतिम में केवल एक शब्द होता है)। मैंने यह भी सुनिश्चित करने की कोशिश की कि दोनों तत्व जिसे मैं नियम लागू करना चाहता हूं और उसके माता-पिता की स्थिति है: मेरे स्वयं के पेज पर रिश्तेदार, लेकिन यह अभी भी छपाई करते समय पृष्ठ को नहीं जोड़ेगा। तो क्या यह एक ऐसी सुविधा है जो क्रोम में आती और जाती है?

— जो डायंडेल

आप सही कह रहे हैं .... यह क्रोम के हाल के संस्करणों में काम नहीं करता है; हालाँकि, आप इसे बदल सकते हैं: -webkit- क्षेत्र-विराम-अंदर: से बचें; (यह एक देखें: jsfiddle.net/QCvA5/22/show )

— पीटर

@Peter यहाँ कोई अद्यतन? मैंने एक एसओ प्रश्न पोस्ट किया है जिसमें बाउंटी ने मेरी स्थिति का उपयोग करने की कोशिश की है page-break-inside। कोई मदद?

— Zach Saucier

1

यह मेरे लिए एक विषमता के साथ काम करता है - यह केवल तभी काम करता है जब मैं स्टाइल इनलाइन डालता हूं, और अलग सीएसएस फ़ाइल में नहीं। मैं एक h7 तत्व पर उपयोग कर रहा हूँ। क्रोम संस्करण 38.0.2125.111 मीटर है।

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

— गैविन सिम्पसन

16

मैं बस यहाँ ध्यान देना चाहता था कि क्रोम भी div में जो पेज-ब्रेक- * css सेटिंग्स को इग्नोर करता है, जो फ्लोट किया गया है।

मुझे संदेह है कि सीएसएस कल्पना में कहीं इसके लिए एक ध्वनि औचित्य है, लेकिन मुझे लगा कि यह किसी दिन किसी की मदद कर सकता है;

बस एक और नोट: IE7 पिछले ब्लॉक तत्व पर एक स्पष्ट ऊंचाई के बिना पृष्ठ विराम सेटिंग्स को स्वीकार नहीं कर सकता है:

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

— fordareh
स्रोत

2

संभवत: क्योंकि एक तत्व तैरना इसे दस्तावेज़ प्रवाह से उसी तरह ले जाता है जिस तरह से यह पूरी तरह से स्थिति करता है। स्थिति वाले तत्व: पूर्ण पृष्ठ-विराम- * के साथ काम नहीं करेंगे।

— जो डायंडेल

1

इसके अलावा: पृष्ठ विराम शैली वाले तत्व के सभी माता-पिता के बीच कोई फ़्लोटिंग या निरपेक्ष स्थित तत्व नहीं होना चाहिए। मेरे पास "col-xs-12" अभिभावक का बूटस्ट्रैप था, जब मैंने स्पष्ट रूप से इसे "फ्लोट: कोई नहीं" सेट किया, तो पेज ब्रेक काम करना शुरू कर दिया!

— स्तालिनको

12

मेरे पास भी इसी तरह का एक मुद्दा था लेकिन मैंने आखिरकार इसका हल ढूंढ लिया। मेरे पास अतिप्रवाह-एक्स था: छिपा हुआ; <html> टैग पर लागू होने से डोम में नीचे किसी भी तरह का कोई फर्क नहीं पड़ता, यह कभी भी पृष्ठ विराम नहीं होने देता। अतिप्रवाह-एक्स पर लौटने से : दृश्यमान;यह ठीक काम किया।

उम्मीद है कि यह वहाँ किसी को मदद करता है।

— davidbehan
स्रोत

ध्यान दें कि कुछ अतिप्रवाह गुणों वाला कोई मूल तत्व इस समस्या का कारण बन सकता है। मैंने सिर्फ नियम जोड़ा है * { overflow-x: visible }।

— गैरेट

10

मुझे यह समस्या अपने आप हो रही है - मेरा पृष्ठ विराम हर ब्राउज़र में काम करता है, लेकिन Chrome - और इसे पृष्ठ-विराम के बाद नीचे करने के लिए अलग करने में सक्षम था - तत्व एक टेबल सेल के अंदर होने के कारण। (पुराने, सीएमएस में विरासत में मिला हुआ टेम्प्लेट।)

जाहिरा तौर पर क्रोम तालिका कोशिकाओं के अंदर पृष्ठ-विराम से पहले या पृष्ठ-विराम के बाद गुणों का सम्मान नहीं करता है, इसलिए फिल के उदाहरण का यह संशोधित संस्करण उसी पृष्ठ पर दूसरा और तीसरा शीर्षक रखता है:

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

Chrome के कार्यान्वयन को सीएसएस विनिर्देश दिए गए (संदिग्ध रूप से) - आप यहाँ और देख सकते हैं: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en

— नैट कुक
स्रोत

यह मेरी समस्या थी - SharePoint 2007 तक लेआउट के लिए तालिका कोशिकाओं का उपयोग करने के लिए मजबूर होना, इसलिए क्रोम किसी भी प्रिंट शैली शीट लेआउट घोषणाओं का पालन कर रहा था :(

— Dexter

8

सीएसएस से सावधान रहें: display:inline-blockजब मुद्रण।

अगले पृष्ठ पर जाने के लिए सीसीएस संपत्ति में से कोई भी क्रोम और फ़ायरफ़ॉक्स में मेरे लिए काम नहीं करेगा अगर मेरी तालिका शैली के साथ एक डिव के अंदर थी display:inline-block

उदाहरण के लिए, निम्नलिखित काम नहीं करता है:

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

लेकिन निम्नलिखित काम:

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

— Gudradain
स्रोत

1

और "फ्लोट" भी। मूल तत्वों में कोई "फ्लोट" गुण नहीं होना चाहिए।

— जिम्बा तमांग

2

साथ हीdisplay: flex

— माइकल श्मिट

4

मैंने पहले भी क्रोम पर इस मुद्दे का सामना किया था और इसका कारण यह है कि एक div था जो एक मान के लिए न्यूनतम ऊंचाई है। समाधान इस प्रकार था कि मुद्रण करते समय न्यूनतम ऊँचाई रीसेट करें:

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

— हम्मीर अहमद
स्रोत

3

2016 अपडेट:

खैर, मुझे यह समस्या थी, जब मेरे पास थी

overflow:hidden

मेरे डिव पर।

के बाद मैंने बनाया

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

सब कुछ ठीक और परिपूर्ण हो गया

— x0 z1
स्रोत

1

यह समस्या तब हल हुई जब कुछ और नहीं किया। धन्यवाद!

— bstory

1

यदि आप Chrome को बूटस्ट्रैप Css के साथ उपयोग कर रहे हैं, तो ग्रिड लेआउट को नियंत्रित करने वाली कक्षाएं जैसे कि col-xs-12 आदि "फ्लोट: लेफ्ट" का उपयोग करते हैं, जो कि अन्य लोगों ने इंगित किया है, पृष्ठ टूटता है। मुद्रण के लिए अपने पृष्ठ से इन्हें हटा दें। इसने मेरे लिए काम किया। (क्रोम संस्करण पर = 49.0.2623.87)

— अस्त्र भालू
स्रोत

0

वह मुद्दा है इतना लंबा समय बीत जाता है ... पृष्ठ के साइड-फ़ील्ड के बिना यह सामान्य रूप से टूट जाता है, लेकिन जब फ़ील्ड दिखाई देता है, तो पृष्ठ और "पेज ब्रेक स्पेस" स्केल हो जाएगा। इसलिए, एक सामान्य क्षेत्र के साथ, एक दस्तावेज़ के भीतर, इसे गलत दिखाया गया था। मैं इसे सेट के साथ ठीक करता हूं

    width:100%

और उपयोग करें

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

इसे पहली पंक्ति पर प्रयोग करें।

— Intey
स्रोत

0

जहाँ तक मेरा गूगल क्रोम के साथ तालिका में सही पृष्ठ विराम प्राप्त करने का एकमात्र रास्ता पता तत्व को यह दे रहा है <tr>संपत्ति इनलाइन तालिका: प्रदर्शन (या display: inline-ब्लॉक, लेकिन यह अन्य मामलों है कि टेबल नहीं हैं में अच्छी तरह फिट )। इसके अलावा गुणों का उपयोग किया जाना चाहिए "पृष्ठ-विराम के बाद: हमेशा; पृष्ठ-विराम-अंदर: से बचें;" जैसा @Phil Ross ने लिखा है

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

— Codekraft
स्रोत

1

इस पर कोई संकेत tds के अंदर मार्जिन / गद्दी को तोड़ने के लिए नहीं मिल रहा है?

— जॉयफॉर्कर

@joeforker को आपको "पेडिंग: 0; मार्जिन; 0:" के साथ <tr> का उपयोग करना चाहिए और भीतर निहित तत्वों को मार्जिन गुण देते हैं।

— कोडक्राफ्ट

-2

मेरे लिए यह तब काम कर रहा था जब मैंने पैडिंग का उपयोग किया था:

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

— तुविया खुसीद
स्रोत

यह केवल और पेज ब्रेक की वजह से नहीं गद्दी की वजह से काम किया

— चार