मुद्रण करते समय अंत में अतिरिक्त रिक्त पृष्ठ से कैसे बचें?

Question 1

मैं एक सीएसएस संपत्ति का उपयोग कर रहा हूँ,

अगर मैं page-break-after: always;=> का उपयोग करता हूं, तो यह पहले एक अतिरिक्त रिक्त पृष्ठ प्रिंट करता है

अगर मैं page-break-before: always;=> का उपयोग करता हूं, तो इसके बाद एक अतिरिक्त रिक्त पृष्ठ प्रिंट करता है। इससे कैसे बचा जाए?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
    page-break-after: always;

}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>

Question 2

आप शायद जोड़ सकते हैं

.print:last-child {
     page-break-after: auto;
}

इसलिए अंतिम printतत्व को अतिरिक्त पृष्ठ विराम नहीं मिलेगा।

ध्यान दें: यदि आप किसी ब्राउज़र के उस लक्ष्य को लक्षित कर रहे हैं तो IE8 में अंतिम-चाइल्ड चयनकर्ता समर्थित नहीं है।

Question 3

क्या आपने यह कोशिश की है?

@media print {
    html, body {
        height: 99%;    
    }
}

Question 4

यहाँ वर्णित समाधान ने मुझे ( वेबार्काइव लिंक ) मदद की ।

सबसे पहले, आप सभी तत्वों को जोड़ने के लिए बॉर्डर जोड़ सकते हैं कि किस कारण से एक नया पृष्ठ जोड़ा जा सकता है (शायद कुछ मार्जिन, पैडिंग, आदि)।

div { border: 1px solid black;}

और समाधान स्वयं निम्नलिखित शैलियों को जोड़ना था:

html, body { height: auto; }

Question 5

अगर उनमें से कोई भी काम नहीं करता है, तो यह कोशिश करें

@media print {

    html, body {
      height:100vh; 
      margin: 0 !important; 
      padding: 0 !important;
      overflow: hidden;
    }

}

सुनिश्चित करें कि यह 100vh है

Question 6

यह मेरे लिए काम करता है

.print+.print {
    page-break-before: always;
}

Question 7

यदि आप बस CSS का उपयोग करना चाहते हैं और पृष्ठ विराम से बचना चाहते हैं तो उपयोग करें

.print{
    page-break-after: avoid;

}

पृष्ठांकित मीडिया पर एक नज़र डालें

आप pageBreakBefore और pageBreakAfter के लिए स्क्रिप्टिंग समकक्षों का उपयोग कर सकते हैं, गतिशील रूप से उनके मूल्यों को असाइन कर सकते हैं। उदाहरण के लिए, अपने आगंतुकों पर कस्टम पेज को तोड़ने के लिए मजबूर करने के बजाय, आप इसे वैकल्पिक बनाने के लिए एक स्क्रिप्ट बना सकते हैं। यहाँ मैं एक चेकबॉक्स बनाऊंगा जो पृष्ठ को हेडर (h2) पर और प्रिंटर के स्वविवेक (डिफ़ॉल्ट) पर स्लाइस करने के बीच टॉगल करता है:

<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>

<script type="text/javascript">
 function breakeveryheader(){
 var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
 for (i=0; i<document.getElementsByTagName("H2").length; i++)
 document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
 }

इसका उपयोग करने वाले एक उदाहरण के लिए यहां क्लिक करें । आप स्क्रिप्ट के अंदर H2 को दूसरे टैग जैसे P या DIV के साथ बदल सकते हैं।

http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

Question 8

display:noneअन्य सभी तत्वों के लिए सेट करें जो प्रिंट के लिए नहीं हैं। सेटिंग visibility:hiddenउन्हें छिपाए रखेगा, लेकिन वे सभी अभी भी वहां हैं और उनके लिए जगह ले ली है। खाली पृष्ठ उन छिपे हुए तत्वों के लिए है।

Question 9

पता नहीं (अभी के लिए) क्यों, लेकिन इस एक ने मदद की:

   @media print {
        html, body {
            border: 1px solid white;
            height: 99%;
            page-break-after: avoid;
            page-break-before: avoid;
        }
    }

आशा है कि कोई समस्या से लड़ते हुए अपने बालों को बचाएगा ...;)

Question 10

लगता है कि संभावित कारण बहुत सारे हैं, इस विषय के होने के कारण कि बॉडी टैग एक ऊंचाई के साथ समाप्त होता है जिसे डब्ल्यू / ई कारण से बहुत बड़ा माना जाता है।

मेरा कारण: min-height: 100%एक बेस स्टाइलशीट में।

मेरा समाधान: min-height: autoएक @media printनिर्देश में।

नोट, autoPhpStorm के अनुसार, एक सही मूल्य नहीं लगता। हालाँकि, यह मोज़िला के मिनिमल हाइट पर प्रलेखन के अनुसार सही है :

ऑटो
फ्लेक्स आइटम के लिए डिफ़ॉल्ट न्यूनतम आकार, अन्य लेआउट के लिए 0 से अधिक उचित डिफ़ॉल्ट प्रदान करता है।

Question 11

मेरे पास एक समान मुद्दा था, लेकिन इसका कारण यह था कि मेरे पास पृष्ठ के निचले भाग में 40px मार्जिन था, इसलिए बहुत अंतिम पंक्ति हमेशा लपेटेगी भले ही अंतिम पृष्ठ पर इसके लिए जगह हो। किसी प्रकार के page-break-*css कमांड के कारण नहीं । मैंने प्रिंट पर मार्जिन को हटाकर तय किया और यह ठीक काम किया। बस किसी और के समान होने की स्थिति में मेरा समाधान जोड़ना चाहता था!

Question 12

मेरे मामले में सभी डिवीजनों को चौड़ाई निर्धारित करने में मदद मिली:

.page-content div {
    width: auto !important;
    max-width: 99%;
}

Question 13

मैंने प्रिंट क्षेत्र की सीएसएस डिस्प्ले और चौड़ाई की संपत्ति को बदल दिया

#printArea{
    display:table;
    width:100%;
}

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

Question 14

बॉडी टैग पर विभिन्न पेज-ब्रेक सेटिंग्स और हाइट्स और एक लाख विभिन्न सीएसएस नियमों के साथ संघर्ष करने के बाद, मैंने आखिरकार एक साल बाद इसे हल कर दिया।

मेरे पास एक div है जो केवल उस पृष्ठ पर एक ही चीज़ माना जाता है जो प्रिंट करता है, लेकिन मुझे इसके बाद कई खाली पृष्ठ मिल रहे थे। मेरा बॉडी टैग सेट है, visibility:hidden;लेकिन यह पर्याप्त नहीं था। वर्टिकल लम्बे पृष्ठ तत्व अभी भी 'स्पेस' लेते हैं। इसलिए मैंने इसे अपने प्रिंट सीएसएस नियमों में जोड़ा:

#header, #menu, #sidebar{ height:1px; display:none;}

अपने आईडी द्वारा विशिष्ट divs को लक्षित करने के लिए जिनमें लंबा पृष्ठ लेआउट तत्व हैं। मैंने ऊंचाई को सिकोड़ लिया और फिर उन्हें लेआउट से हटा दिया। अधिक खाली पृष्ठ नहीं। वर्षों बाद मुझे अपने ग्राहक को यह बताने में खुशी हुई कि मैंने इसे फटा। आशा है कि यह किसी की मदद करता है।

Question 15

लगता है कि क्रोम एक बग है जहां कुछ स्थितियों में, प्रदर्शन के साथ तत्वों को लोड करने के बाद छिपाना: कोई भी नहीं, बहुत सारे अतिरिक्त स्थान छोड़ देता है। मुझे लगता है कि दस्तावेज़ रेंडर करने से पहले वे दस्तावेज़ की ऊँचाई की गणना कर रहे हैं। Chrome 2 मीडिया परिवर्तन घटनाओं की भी आग लगाता है, और आगे चलकर, आदि का समर्थन नहीं करता है, वे मूल रूप से मुद्रण के साधन हैं। यहाँ मेरा काम है:

@media print {
    body {
        display: none;
    }
}

body.printing {
    display: block;
}

डॉक रेडी पर आप बॉडी क्लास = "प्रिंटिंग" देते हैं, और यह प्रिंट शैलियों को सक्षम बनाता है। यह प्रणाली प्रिंट शैलियों, और इन-ब्राउज़र प्रिंट पूर्वावलोकन को संशोधित करने की अनुमति देती है।

Question 16

.print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

इसने मेरे लिए काम किया।

Question 17

सीएसएस फ़ाइल को बढ़ाने के लिए इस सीएसएस को उसी पृष्ठ पर जोड़ें।

<style type="text/css">
   <!--
   html, body {
    height: 95%; 
    margin: 0 0 0 0;
     }
   -->
</style>

Question 18

मैंने सभी समाधानों की कोशिश की, यह मेरे लिए काम करता है:

<style>
    @page {
        size: A4;
        margin: 1cm;
    }

    .print {
        display: none;
    }

    @media print {
        div.fix-break-print-page {
            page-break-inside: avoid;
        }

        .print {
            display: block;
        }
    }

    .print:last-child {
        page-break-after: auto;
    }
</style>

Question 19

मुझे सिर्फ एक मामले का सामना करना पड़ा जहां से बदल रहा है

    </div>
    <script src="addressofjavascriptfile.js"></script>
</body>
</html>

सेवा

        <script src="addressofjavascriptfile.js"></script>
    </div>
</body>
</html>

इस समस्या को ठीक किया।

Question 20

एक पारदर्शी सीमा को अजीब तरह से सेट करना मेरे लिए इसे हल कर गया:

@media print {
  div {
    border: 1px solid rgba(0,0,0,0)
  }
}

शायद यह कंटेनर तत्व पर सीमा निर्धारित करने के लिए पर्याप्त होगा। <- असत्य।

Question 21

किसी भी जवाब ने मेरे साथ काम नहीं किया, लेकिन उन सभी को पढ़ने के बाद, मुझे पता चला कि मेरे मामले में क्या समस्या थी मेरे पास 1 एचटीएमएल पेज है जिसे मैं प्रिंट करना चाहता हूं लेकिन यह एक अतिरिक्त सफेद रिक्त पृष्ठ के साथ मुद्रण कर रहा था। मैं रिपोर्ट के पृष्ठ को प्रिंट करने के लिए AdminLTE एक बूटस्ट्रैप 3 विषय का उपयोग कर रहा हूं और इसमें पाद लेख मैं इस पाठ को पृष्ठ के नीचे दाईं ओर रखना चाहता था:

श्री किसी ने छापा

मैंने पिछले पाठ "कॉपी राइट्स" पाद लेख के बजाय उस पाठ को रखने के लिए jquery का उपयोग किया

$("footer").html("Printed by Mr. Someone");

और थीम में डिफ़ॉल्ट रूप से टैग पाद लेख वर्ग का उपयोग करता है। मुख्य पाद लेख जिसमें विशेषताएँ हैं

padding: 15px;
border-top: 1px solid

इसके कारण एक अतिरिक्त सफेद जगह बन गई, इसलिए इस मुद्दे को जानने के बाद, मेरे पास अलग-अलग विकल्प थे, और सबसे अच्छा विकल्प का उपयोग करना था

$( "footer" ).removeClass( "main-footer" );

बस उस विशिष्ट पेज में

Question 22

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

Question 23

जांच करें कि नीचे HTML टैग के बाद कोई सफेद स्थान है या नहीं। नीचे दिए गए किसी भी व्हाट्सएप को हटाने से मुझे मदद मिली

Question 24

सबसे पहले, अपने ब्राउज़र के devtools के माध्यम से प्रिंट स्टाइलशीट का अनुकरण करें। यहां निर्देश मिल सकते हैं ।

फिर आप अतिरिक्त पैडिंग, मार्जिन, बॉर्डर इत्यादि की तलाश करना चाहते हैं, जो कि 8.58 या 11in से परे आपके पृष्ठों के आयामों का विस्तार कर सकते हैं। व्हाट्सएप पर विशेष ध्यान दें क्योंकि प्रिंट प्रीव्यू डायलॉग के जरिए इसका पता लगाना असंभव होगा। अगर व्हाट्सएप है जो वहां नहीं होना चाहिए, तो कर्सर के नीचे तत्व पर राइट-क्लिक करना और उसका निरीक्षण करना इस मुद्दे को उजागर करना चाहिए (जब तक कि यह एक मार्जिन न हो)।