क्या मैं HTML मुद्रण में पृष्ठ विराम को बाध्य कर सकता हूँ?

187

मैं एक HTML रिपोर्ट बना रहा हूं जो प्रिंट करने योग्य है, और इसमें "अनुभाग" हैं जो एक नए पृष्ठ में शुरू होने चाहिए।

क्या HTML / CSS में कुछ डालने का कोई तरीका है जो ब्राउज़र को संकेत देगा कि उसे उस समय पृष्ठ विराम (एक नया पृष्ठ शुरू करने) के लिए मजबूर करना होगा?

मुझे इसकी ज़रूरत नहीं है कि मैं हर ब्राउज़र में काम कर सकूं, मुझे लगता है कि मैं लोगों को इसे प्रिंट करने के लिए ब्राउज़र के एक विशिष्ट सेट का उपयोग करने के लिए कह सकता हूं।

html printing page-break

— डैनियल मैगलियोला
स्रोत

334

"पेजब्रेक" (या "pb") नामक सीएसएस क्लास जोड़ें, जैसे:

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}

इसके बाद एक खाली DIV टैग ( या कोई भी ब्लॉक एलीमेंट जो एक बॉक्स जेनरेट करता है ) जोड़ें जहां आप पेज को तोड़ना चाहते हैं।

<div class="pagebreak"> </div>

यह पृष्ठ पर दिखाई नहीं देगा, लेकिन छपाई करते समय पृष्ठ को तोड़ देगा।

PS शायद यह केवल तभी लागू होता है जब आप उपयोग करते हैं -after(और यह भी कि आप <div>पृष्ठ पर अन्य s के साथ क्या कर रहे हैं ), लेकिन मैंने पाया कि मुझे सीएसएस वर्ग को निम्नानुसार बढ़ाना था:

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

— क्रिस डॉगेट
स्रोत

7

लेकिन सीएसएस में सभी अच्छी चीजों की तरह, यह हमेशा बोर्ड भर में लगातार काम नहीं करता है, इसलिए इसके बाहर रहने वाले दिन के उजाले का परीक्षण करें, ऐसा न हो कि आप नाराज उपयोगकर्ताओं को सोच रहे हों कि आपकी साइट अतिरिक्त खाली पृष्ठों के ढेर क्यों लगाती है!

— ज़ो

13

एमडीएन के अनुसार, page-break-after"एक बॉक्स बनाने वाले तत्वों को ब्लॉक करने के लिए लागू होता है," इसलिए एक खाली <span>तत्व का उपयोग करने से काम नहीं चलेगा। इसे अपनी सामग्री के एक टुकड़े पर लागू करना बेहतर है। डेवलपर

— pmillailla.org/en-US/docs/Web/CSS/page-break-after

1

@ अशक्तता: अच्छी पकड़। मैंने मुख्य रूप से WinForms में एक WebBrowser नियंत्रण में अपनी पुरानी नौकरी पर इसका इस्तेमाल किया था, जो IE, निम्न मानकों के सोने के मानक का उपयोग करता था।

— क्रिस डोगेट

1

क्रोम में यह मेरे लिए काम नहीं करता था ... मैं <tr> के अंदर <tr> के बाद पेजब्रेक करने की कोशिश कर रहा हूं, क्या यह इस मामले में काम करेगा?

— डेलफिर्यूल्स

3

किसी कारण से, क्रोम में इस ट्रिक का उपयोग करते समय, अगले पृष्ठ के पिक्सल की 1 पंक्ति पिछले एक में लीक हो रही थी (पृष्ठभूमि-रंग का उपयोग करते समय ध्यान देने योग्य)। मैं का उपयोग करके इसे तय.pagebreak { min-height: 1px; page-break-before: always; }

— pzmarzly

44

इस लिंक को आज़माएं

<style>
@media print
{
h1 {page-break-before:always}
}
</style>

— jfarrell
स्रोत

मुझे लगता है कि यह एक बेहतर जवाब है क्योंकि इसमें विज़ुअल इफ़ेक्ट हासिल करने के लिए HTML को मेनटेन करना शामिल नहीं है।

— FinnNk

मैं वास्तव में दूसरे को बेहतर पसंद करता हूं, क्योंकि यह मुझे अधिक नियंत्रण देता है। मैं हमेशा केवल H1 के वर्ग "पेजब्रेक" को असाइन कर सकता हूं, जिससे पृष्ठ को कूदना चाहिए। लेकिन यह अभी भी एक अच्छा समाधान है। +1 @ @ मीडिया के लिए, हालाँकि स्क्रीन को पृष्ठ-विराम से पहले अनदेखा करना चाहिए, मुझे लगता है। धन्यवाद!

— डैनियल मैग्लियोला

h1 इस बात का एक उदाहरण है कि आप प्रिंट ब्रेक के लिए टैग के रूप में क्या उपयोग कर सकते हैं। आप वहाँ विकल्प और टैग नाम पसंद कर सकते हैं। आप पृष्ठ-विराम के बाद भी उपयोग कर सकते हैं: हमेशा

— jfarrell

1

h1एक अच्छा उदाहरण नहीं है, क्योंकि इसका मतलब है कि यह 1 स्तर का शीर्षक है, और एक पृष्ठ में सामान्य रूप से सिर्फ एक शीर्षक होना चाहिए।

— जुक्का के। कोर्पेला

6

यदि आप पहले पृष्ठ पर पहले शीर्ष लेख को छोड़ना चाहते हैं, तो कोशिश करेंh1:not(:first-child) { page-break-before:always; }

— जेफ एटवुड

10

बस एक अद्यतन रखना चाहता था। page-break-afterअब एक विरासत संपत्ति है।

आधिकारिक पृष्ठ बताता है

इस संपत्ति को विराम के बाद की संपत्ति से बदल दिया गया है ।

— shazyriver
स्रोत

यह ध्यान दिया जाना चाहिए कि यह संपत्ति केवल Microsoft IE और एज ब्राउज़रों द्वारा समर्थित है। caniuse.com/…

— बेंजामिन

7

आप सीएसएस संपत्ति page-break-before(या page-break-after) का उपयोग कर सकते हैं । बस सेट page-break-before: alwaysउन ब्लॉक स्तर तत्वों (जैसे, शीर्षक, पर div, pया tableतत्वों) कि एक नई लाइन पर शुरू कर देना चाहिए।

उदाहरण के लिए, किसी भी 2-स्तरीय हेडिंग से पहले और कक्षा में किसी भी तत्व newpage(जैसे, <div class=newpage>...) से पहले एक लाइन ब्रेक का कारण बनने के लिए , आप उपयोग करेंगे

h2, .newpage { page-break-before: always }

— जुक्का के। कोरपेला
स्रोत

5

First page (scroll down to see the second page)
<div style="break-after:page"></div>
Second page
<br>
<br>
<button onclick="window.print();return false;" />Print (to see the result) </button>

स्निपेट का विस्तार करें

बस इसे जोड़ें जहां आपको अगले एक पर जाने के लिए पृष्ठ की आवश्यकता है (पाठ "पृष्ठ 1" पृष्ठ 1 पर होगा और पाठ "पृष्ठ 2" दूसरे पृष्ठ पर होगा)।

Page 1
<div style='page-break-after:always'></div>
Page 2

यह भी काम करता है:

First page (there is a break after this)
<div style="break-after:page"></div>
Second page (This will be printed in the second page)

— जियोवन्नी जी। पी। वाई
स्रोत

1

मान लीजिए कि आपके पास इस तरह के लेख के साथ एक ब्लॉग है:

<div class="article"> ... </div>

इसे सीएसएस में जोड़ने से मेरे लिए काम किया:

@media print {
  .article { page-break-after: always; }
}

(क्रोम 69 और फ़ायरफ़ॉक्स 62 पर परीक्षण और काम कर रहा है)।

संदर्भ:

https://www.w3schools.com/cssref/pr_print_pageba.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ; महत्वपूर्ण नोट: यहाँ यह कहा गया है, This property has been replaced by the break-after property.लेकिन यह मेरे साथ काम नहीं किया break-after। इसके अलावा MDN के बारे में break-afterपृष्ठ-विराम के लिए विशिष्ट प्रतीत नहीं होता है, इसलिए मैं (कार्य) रखना पसंद करता हूं page-break-after: always;।

— Basj
स्रोत

0

हम " पेज-ब्रेक-आफ्टर: ऑलवेज " पेज के साथ एक पेज ब्रेक टैग जोड़ सकते हैं , उस बिंदु पर जहां हम html पेज में पेजब्रेक शुरू करना चाहते हैं।

" पेज-ब्रेक-बिफोर " भी काम करता है

उदाहरण:

HTML_BLOCK_1
<p style="page-break-after: always"></p>
HTML_BLOCK_2
<p style="page-break-after: always"></p>
HTML_BLOCK_3

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

— चिन्मय
स्रोत

0

जब हम ब्राउज़र पर प्रिंट कमांड का उपयोग करते हैं तो मुझे हर तीसरी पंक्ति के बाद एक पेज ब्रेक की आवश्यकता होती है।

मैंने <div style = 'page-break-before: always;'> </ div> जोड़ा

हर तीसरी पंक्ति के बाद और मेरे माता-पिता को डिस्प्ले: फ्लेक्स; इसलिए मैंने प्रदर्शन को हटा दिया: फ्लेक्स; और यह काम कर रहा था जैसा मैं चाहता हूं।

— दिनेश शर्मा
स्रोत

0

सीएसएस

@media print {
  .pagebreak { 
     page-break-before: always; 
  }
}

एचटीएमएल

<div class="pagebreak"></div>

— व्लाद ह्नतोवस्की
स्रोत

-7

@ क्रिस डॉग्जट सही समझ में आता है। हालाँकि, मुझे lvsys.com पर एक मज़ेदार ट्रिक मिली , और यह वास्तव में फ़ायरफ़ॉक्स और क्रोम पर काम करता है। आप इस टिप्पणी को कहीं भी डाल सकते हैं जहाँ आप चाहते हैं कि पृष्ठ-विराम डाला जाए। आप <p>टैग को किसी भी ब्लॉक एलिमेंट से बदल सकते हैं ।

<p><!-- pagebreak --></p>

— ओनिया डैनियल
स्रोत