ওয়েব পৃষ্ঠা মুদ্রণ করার সময় আমি কীভাবে একটি উপাদান আড়াল করব?

Question

ওয়েবপৃষ্ঠাটি মুদ্রণের জন্য আমার ওয়েবপৃষ্ঠায় একটি লিঙ্ক রয়েছে। তবে লিঙ্কটি প্রিন্টআউটে নিজেই দৃশ্যমান।

জাভাস্ক্রিপ্ট বা এইচটিএমএল কোড রয়েছে যা আমি মুদ্রণ লিঙ্কটি ক্লিক করলে লিঙ্ক বোতামটি লুকিয়ে রাখবে?

উদাহরণ:

 "Good Evening"
 Print (click Here To Print)

"শুভ সন্ধ্যা" লেখাটি প্রিন্ট করলে আমি এই "মুদ্রণ" লেবেলটি আড়াল করতে চাই। "মুদ্রণ" লেবেলটি প্রিন্ট আউটটিতে নিজেই প্রদর্শিত হবে না।

Answer 1

আপনার স্টাইলশিটে যুক্ত করুন:

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

তারপরে class='no-print'আপনার এইচটিএমএলে (বা কোনও প্রিন্ট ক্লাস কোনও বিদ্যমান শ্রেণীর বিবৃতিতে যোগ করুন) যুক্ত করুন যা আপনি মুদ্রিত সংস্করণে যেমন আপনার বোতামের মতো উপস্থিত হতে চান না।

Comments

এই উত্তরটি সম্পূর্ণ নয়। আপনার দুটি মিডিয়া বিভাগ থাকতে হবে। @mediaমুদ্রণ এবং @mediaপর্দা। মুদ্রণ বিভাগে, আপনি মুদ্রণের জন্য আপনার শৈলীগুলি রাখুন। স্ক্রিন স্ক্রিন বিভাগে, আপনি স্ক্রিন মুদ্রণের জন্য আপনার স্টাইল স্থাপন করেন। এমনকি আপনার বিভিন্ন রেজোলিউশনের জন্য একাধিক স্ক্রিন বিভাগ থাকতে পারে। মূলত আপনি যদি এই উত্তরে কেবল যা যোগ করেন তবে তা কার্যকর হবে না। বিশ্বাস করুন আমি চেষ্টা করেছি। তাহলে এটি কীভাবে up৯ টি আপগেট পেয়েছে?

— Codeguy007

আসলে, এটি কাজ করে যদি আপনি কেবল যে কোডটি দেওয়া হয় তা ব্যবহার করেন। আমি কেবল ফায়ারফক্সে চেষ্টা করেছি। সুতরাং, কমপক্ষে আধুনিক ব্রাউজারগুলিতে এটিই সমাধান।

— luschn

আমি ভিতরে <<iviv> বেশ কয়েকটি সাব-এলিমেন্ট সহ লুকানোর চেষ্টা করেছি। সমস্যাটি ছিল কিছু মুদ্রণগুলিতে এখনও কিছু উপাদান দৃশ্যমান ছিল। সমাধানটি এই সিএসএসটি ব্যবহার করার ছিল:@media print { .no-print, .no-print * { display: none !important; } }

— ফিলিপ

এটি নির্দিষ্ট মিডিয়াটির উপর নির্ভর করে কাজ করতে পারে বা নাও করতে পারে। উদাহরণস্বরূপ, এক স্টাইলশিটে স্ক্রিন এবং মুদ্রণ উভয় শৈলীর একত্রিত করার জন্য, সেই স্টাইলশীটের মধ্যে মিডিয়া ক্যোয়ারীগুলি ব্যবহার করুন, যেমন এই উত্তরটি সূচিত করে, আপনাকে অবশ্যই "স্ক্রিন" এবং "মুদ্রণ" মিডিয়া উভয় প্রকারের নির্দিষ্ট করতে হবে:<link rel="stylesheet" href="all.css" media="screen, print" type="text/css">

— ক্লিন্ট প্যাচল

@ কোডগুই 700: আমি আপনার বক্তব্য বুঝতে পারি না। আপনার কেবলমাত্র @media screenযদি আপনি কেবল স্ক্রিন-কেবল স্টাইলগুলি সংজ্ঞায়িত করতে চান তবে এটি এখানে নয়: ডিফল্টরূপে সমস্ত উপাদান প্রদর্শিত হয় এবং একটি মুদ্রণ-কেবল স্টাইলিং সংজ্ঞায়িত করে যা উপাদানটি লুকিয়ে রাখে এটি পুরোপুরি পর্যাপ্ত পর্যায়ে যথেষ্ট যাতে এটি স্ক্রিনে প্রদর্শিত হয় to ।

— চিককোডোরো

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

এখানে অন্যান্য র‍্যাপার সামগ্রীগুলি প্রদর্শন না করার জন্য, ফন্ট-পরিবারকে আরও ভাল মান হিসাবে পরিবর্তন করতে, পৃষ্ঠার সম্পূর্ণ ব্যবহারের অনুমতি দেওয়ার জন্য প্রস্থগুলি অপসারণ করতে আপনার সিএসএস থাকা উচিত। আপনি যদি মিডিয়া = "স্ক্রিন" এ আপনার প্রধান স্টাইলশিট সেট করেন তবে আপনি আপনার মুদ্রণ স্টাইলশীটটিকে একটি নতুন প্লেগাউন্ড হিসাবে বিবেচনা করতে পারেন।

— স্টিভ পার্কস

একেবারে। এবং এই পদ্ধতির সাহায্যে আপনি কেবল "মুদ্রণযোগ্য সংস্করণের জন্য এখানে ক্লিক করুন" বা "এই পৃষ্ঠাটি মুদ্রক-বান্ধব" বা অনুরূপ যুক্ত করতে পারেন। স্টিভ পার্কস যেমন বলেছিলেন, তেমন ভাল অনুশীলন হ'ল নেভিগেশন, বিজ্ঞাপন এবং এর মতো সমস্ত অনিচ্ছাকৃত সামগ্রী মুছে ফেলুন। পৃষ্ঠার প্রাথমিক বিষয়বস্তু অন্তর্ভুক্ত করুন।

— Systad আগস্ট

Answer 4

এই সিএসএস লাগানো একটি সহজ সমাধান

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

এবং এখানে এইচটিএমএল

<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;
    }
}

এইচটিএমএল শিরোনাম

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

ELEMENT

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

Answer 6

আপনি লিঙ্কটি একটি ডিভের মধ্যে রাখতে পারেন, তারপরে ক্লিক করার পরে ডিভটি লুকানোর জন্য অ্যাঙ্কর ট্যাগটিতে জাভাস্ক্রিপ্ট ব্যবহার করুন। উদাহরণ (পরীক্ষিত নয়, টুইট করা দরকার হতে পারে তবে আপনি ধারণাটি পান):

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

খারাপ দিকটি হ'ল একবার ক্লিক করলে বোতামটি অদৃশ্য হয়ে যায় এবং তারা পৃষ্ঠায় সেই বিকল্পটি হারাতে থাকে (যদিও সবসময় Ctrl + P থাকে)।

আরও ভাল সমাধান হ'ল একটি মুদ্রণ স্টাইলশিট তৈরি করা হবে এবং সেই স্টাইলশীটের মধ্যে printOptionআইডির লুকানো স্থিতি (বা আপনি যেটাকেই ডাকবেন) উল্লেখ করুন। আপনি এইচটিএমএলের প্রধান অংশে এটি করতে পারেন এবং একটি মিডিয়া বৈশিষ্ট্যযুক্ত একটি দ্বিতীয় স্টাইলশিট নির্দিষ্ট করতে পারেন।

Answer 7

করণীয় হ'ল সর্বোত্তম বিষয় হল পৃষ্ঠার "কেবলমাত্র মুদ্রণযোগ্য" সংস্করণ তৈরি করা।

ওহ, অপেক্ষা করুন ... এটি আর 1999 নয়। "প্রদর্শন: কিছুই নয়" সহ একটি মুদ্রণ সিএসএস ব্যবহার করুন।

Comments

মুদ্রণযোগ্য সংস্করণগুলিতে এখনও কিছু মূল্য রয়েছে কারণ এটি ব্যবহারকারীদের কাছে স্পষ্টভাবে প্রদর্শিত হয় যে তারা প্রিন্ট করলে তারা কী পাবে যা সিএসএস কৌশলগুলির সাথে

— আপত্তিজনকভাবে

যোগ করা হয়েছে, আপনি লিঙ্ক রেফারেন্স, পাদচরণ ইত্যাদি প্রিন্ট সংস্করণে অতিরিক্ত বিষয়বস্তু অন্তর্ভুক্ত করতে পারেন আগত দিনগুলিতে, যদিও অনেক কিছুই CSS এর মাধ্যমে অর্জনযোগ্য হবে।

— স্টিভ পার্কস

@ নানকাতা: ব্যবহারকারীরা তাদের ব্রাউজারে "মুদ্রণ পূর্বরূপ" ব্যবহার করে ইতিমধ্যে তা পেতে পারেন। বোনাস হিসাবে, এটি আসলে এটিই।

— পুনরাবৃত্তির জন্য

Answer 8

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

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

<div>
  Yup
</div>

Answer 9

ডায়োডাসের দ্বারা গৃহীত উত্তর আমাদের সবার না থাকলে কারও পক্ষে কাজ করছে না। আমি এখনও আমার মুদ্রণ এই বোতামটি কাগজে যাওয়া থেকে আড়াল করতে পারিনি।

ক্লিন্ট প্যাচেল সামান্য সমন্বয় করে সিএসএস ফাইল কল করে যোগ করুন

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

আমি মনে করি এই সমস্যাটি সবার জন্য সমাধান করে ves

Answer 10

যদি আপনার কাছে জাভাস্ক্রিপ্ট থাকে যা পৃথক উপাদানগুলির শৈলীর সম্পত্তিতে হস্তক্ষেপ করে, এভাবে ওভাররাইড হয় !important, আমি ইভেন্টগুলি পরিচালনা করার পরামর্শ দিই onbeforeprintএবং onafterprint। https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint