वेब पेज को प्रिंट करते समय मैं एक तत्व को कैसे छिपाऊं?

Question

मेरे पास वेबपेज प्रिंट करने के लिए मेरे वेबपेज पर एक लिंक है। हालाँकि, लिंक प्रिंटआउट में भी दिखाई देता है।

क्या जावास्क्रिप्ट या HTML कोड है जो प्रिंट लिंक पर क्लिक करने पर लिंक बटन को छिपा देता है?

उदाहरण:

 "Good Evening"
 Print (click Here To Print)

मैं इस "प्रिंट" लेबल को छिपाना चाहता हूं जब यह पाठ "गुड इवनिंग" को प्रिंट करता है। "प्रिंट" लेबल को प्रिंटआउट पर ही नहीं दिखाना चाहिए।

Answer 1

अपनी स्टाइलशीट में जोड़ें:

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

फिर class='no-print'अपने HTML में एक मौजूदा क्लास स्टेटमेंट में नो-प्रिंट क्लास जोड़ें (या जोड़ दें) जिसे आप मुद्रित संस्करण में नहीं दिखाना चाहते हैं, जैसे कि आपका बटन।

Comments

यह उत्तर पूर्ण नहीं है। आपके पास दो मीडिया सेक्शन होने चाहिए। @mediaप्रिंट और @mediaस्क्रीन। प्रिंट सेक्शन में, आप अपनी शैलियों को छपाई के लिए रखते हैं। स्क्रीन स्क्रीन सेक्शन में, आप अपनी शैली को स्क्रीन प्रिंटिंग के लिए रखते हैं। तुम भी विभिन्न प्रस्तावों के लिए कई स्क्रीन वर्गों हो सकता है। मूल रूप से यदि आप सिर्फ इस उत्तर में दिए गए प्रश्नों को जोड़ते हैं, तो यह काम नहीं करेगा। मेरा विश्वास करो मैंने कोशिश की है। तो यह 69 उत्थान कैसे हुआ?

— 21:39 पर कोडगुवाई 007

वास्तव में, यह काम करता है यदि आप बस उस कोड का उपयोग करते हैं जो दे रहा है। मैं सिर्फ फ़ायरफ़ॉक्स में कोशिश की। इसलिए, कम से कम आधुनिक ब्राउज़रों में इसका समाधान है।

— लूसन

मैंने अंदर कई उप-तत्वों के साथ <div> छिपाने की कोशिश की। समस्या यह थी कि कुछ तत्व अभी भी प्रिंट पर दिखाई दे रहे थे। समाधान इस सीएसएस का उपयोग करने के लिए किया गया था:@media print { .no-print, .no-print * { display: none !important; } }

— फिलिप

यह निर्दिष्ट मीडिया के आधार पर काम कर सकता है या नहीं भी हो सकता है। उदाहरण के लिए, दोनों स्क्रीन और प्रिंट शैलियों को एक स्टाइलशीट में संयोजित करने के लिए, फिर उस स्टाइलशीट के भीतर मीडिया प्रश्नों का उपयोग करें, क्योंकि यह उत्तर बताता है, आपको "स्क्रीन" और "प्रिंट" दोनों प्रकार के मीडिया प्रकार निर्दिष्ट करने होंगे:<link rel="stylesheet" href="all.css" media="screen, print" type="text/css">

— क्लिंट पाचल

@ Codeguy007: मुझे आपकी बात समझ में नहीं आई। आपको केवल @media screenस्क्रीन-केवल शैलियों को परिभाषित करने की आवश्यकता है, लेकिन यहां ऐसा नहीं है: डिफ़ॉल्ट रूप से सभी तत्व प्रदर्शित होते हैं, और प्रिंट-केवल स्टाइल को परिभाषित करके, जो तत्व को छिपाता है, यह स्क्रीन पर दिखाई देने के लिए पूरी तरह से पर्याप्त है ।

— चिक्कोडोरो

Answer 2

बूटस्ट्रैप 3 के पास इसके लिए अपना वर्ग है :

hidden-print

इसे इस तरह परिभाषित किया गया है:

@media print {
  .hidden-print {
    display: none !important;
  }
}

आपको इसे अपने दम पर परिभाषित करने की आवश्यकता नहीं है।

---

में बूटस्ट्रैप 4 यह करने के लिए बदल गया है:

.d-print-none

Comments

महान बूटस्ट्रैप 4 समाधान। एक जादू की तरह काम करता है।

— डिएगो विक्टर डे जीसस

मैं विश्वास नहीं कर सकता कि मैंने बूटस्ट्रैप समाधान को अब तक कैसे याद किया .. धन्यवाद!

— वापसी योग्य

! importantमुझे बचाया।

— इवान हू

Answer 3

विशेष रूप से छपाई के लिए एक स्टाइल शीट का उपयोग करना , और इसकी mediaविशेषता निर्धारित करना सबसे अच्छा अभ्यास है print।

इसमें, उन तत्वों को दिखाएं / छिपाएं जिन्हें आप कागज पर मुद्रित करना चाहते हैं।

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Comments

यहां आपको अन्य आवरण सामग्री को प्रदर्शित नहीं करने के लिए सीएसएस भी होना चाहिए, फ़ॉन्ट-परिवार को बेहतर मूल्य में बदल दें, पृष्ठ के पूर्ण उपयोग की अनुमति देने के लिए चौड़ाई हटा दें। यदि आप अपना मुख्य स्टाइलशीट मीडिया = "स्क्रीन" पर सेट करते हैं तो आप अपनी प्रिंट स्टाइलशीट को एक नए प्लेगाउंड के रूप में मान सकते हैं।

— स्टीव पर्क्स

पूर्ण रूप से। और इस दृष्टिकोण के साथ, आप या तो "प्रिंट करने योग्य संस्करण के लिए यहां क्लिक करें" को हटा सकते हैं या "यह पृष्ठ प्रिंटर के अनुकूल है" या समान जोड़ सकते हैं। अच्छा अभ्यास है, जैसा कि स्टीव पर्क ने कहा, नेविगेशन, विज्ञापन और इस तरह की सभी असमान सामग्री को हटा दें। केवल पृष्ठ की प्राथमिक सामग्री शामिल करें।

— सिवद

Answer 4

यहाँ एक सरल समाधान इस सीएसएस डाल दिया है

@media print{
   .noprint{
       display:none;
   }
}

और यहाँ HTML है

<div class="noprint">
    element that need to be hidden when printing
</div>
<div class="noprint">
    element that need to be hidden when printing
</div>

Comments

एक वर्ग यहाँ एक आईडी से बेहतर विकल्प होगा, इस सरल कारण के लिए कि यदि आप एक आईडी का उपयोग करते हैं तो आप इस नियम को प्रति पृष्ठ एक चीज़ पर लागू कर सकते हैं। एक वर्ग आपको जहाँ कहीं भी आवश्यकता हो, आपको इसे लागू करने की अनुमति देगा।

— निक एफ

Answer 5

सीएसएस फ़ाइल

@media print
{
    #pager,
    form,
    .no-print
    {
        display: none !important;
        height: 0;
    }


    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }
}

HTML हेडर

<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >

तत्व

<div class="no-print"></div>

Answer 6

आप लिंक को div के भीतर रख सकते हैं, फिर क्लिक करने पर div को छिपाने के लिए एंकर टैग पर जावास्क्रिप्ट का उपयोग करें। उदाहरण (परीक्षण नहीं किया जा सकता है, लेकिन आपको विचार प्राप्त करना होगा):

<div id="printOption">
    <a href="javascript:void();" 
       onclick="document.getElementById('printOption').style.visibility = 'hidden'; 
       document.print(); 
       return true;">
       Print
    </a>
</div>

नकारात्मक पक्ष यह है कि एक बार क्लिक करने के बाद, बटन गायब हो जाता है और वे पृष्ठ पर उस विकल्प को खो देते हैं (हालांकि हमेशा Ctrl + P हालांकि होता है)।

बेहतर समाधान प्रिंट स्टाइलशीट बनाना होगा और उस स्टाइलशीट के भीतर printOptionआईडी की छिपी स्थिति (या जिसे आप इसे कहते हैं) निर्दिष्ट करें। आप इसे HTML के मुख्य भाग में कर सकते हैं और एक मीडिया स्टाइल के साथ दूसरी स्टाइलशीट निर्दिष्ट कर सकते हैं।

Answer 7

सबसे अच्छी बात यह है कि पेज का "प्रिंट-ओनली" संस्करण बनाया जाए।

ओह, रुको ... यह 1999 नहीं है। "प्रदर्शन: कोई नहीं" के साथ एक प्रिंट सीएसएस का उपयोग करें।

Comments

प्रिंट करने योग्य संस्करणों में अभी भी कुछ मूल्य है क्योंकि यह उपयोगकर्ता को स्पष्ट रूप से प्रदर्शित करता है कि वे क्या प्राप्त करेंगे जब वे प्रिंट करेंगे जो सीएसएस तकनीकों के साथ दुर्व्यवहार किया जा सकता है

— annakata

इसके अतिरिक्त, आप लिंक संदर्भ, पाद लेख इत्यादि जैसे प्रिंट संस्करण पर अतिरिक्त सामग्री शामिल कर सकते हैं। आने वाले दिनों में, इसमें से बहुत सीएसएस के माध्यम से प्राप्त किया जा सकता है।

— स्टीव पर्क्स

@annakata: उपयोगकर्ता पहले से ही अपने ब्राउज़र पर "प्रीव्यू प्रीव्यू" का उपयोग कर सकते हैं। एक बोनस के रूप में, यह वास्तव में इसके लिए क्या है।

— पुनरावर्ती

Answer 8

@media print {
  .no-print {
    visibility: hidden;
  }
}

<div class="no-print">
  Nope
</div>

<div>
  Yup
</div>

Answer 9

डायोडस द्वारा स्वीकृत उत्तर कुछ के लिए काम नहीं कर रहा है यदि हम सभी नहीं हैं। मैं अभी भी अपने प्रिंट इस बटन को कागज पर बाहर जाने से नहीं छिपा सकता था।

जोड़ने पर css फ़ाइल को कॉल करने के क्लिंट पचल द्वारा थोड़ा समायोजन

      media="screen, print" 

और बस नहीं

      media="screen"

इस समस्या को हल कर रहा है। तो स्पष्टता के लिए और क्योंकि क्लिंट पचल को टिप्पणियों में छिपी अतिरिक्त मदद को देखना आसान नहीं है। उपयोगकर्ता को वांछित फ़ॉर्मेटिंग के साथ css फ़ाइल में "प्रिंट" करना चाहिए।

     <link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">

और डिफ़ॉल्ट मीडिया = "स्क्रीन" ही नहीं।

    <link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">

मुझे लगता है कि सभी के लिए इस समस्या का हल है।

Answer 10

आप जावास्क्रिप्ट है, तो अलग-अलग तत्वों की शैली संपत्ति है, इस प्रकार के साथ हस्तक्षेप अधिभावी कि !important, मैं सुझाव है कि घटनाओं से निपटने onbeforeprintऔर onafterprint। https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint