ฉันจะซ่อนองค์ประกอบเมื่อพิมพ์หน้าเว็บได้อย่างไร

ฉันมีลิงค์บนเว็บเพจของฉันเพื่อพิมพ์เว็บเพจ อย่างไรก็ตามลิงค์นี้ยังปรากฏในงานพิมพ์ด้วย

มี javascript หรือ HTML code ซึ่งจะซ่อนปุ่มลิงค์เมื่อฉันคลิกลิงค์พิมพ์?

ตัวอย่าง:

 "Good Evening"
 Print (click Here To Print)

ฉันต้องการซ่อนป้ายกำกับ "พิมพ์" นี้เมื่อพิมพ์ข้อความ "ราตรีสวัสดิ์" ฉลาก "พิมพ์" ไม่ควรแสดงบนงานพิมพ์เอง

ในสไตล์ชีทของคุณเพิ่ม:

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

จากนั้นเพิ่มclass='no-print'(หรือเพิ่มคลาสที่ไม่พิมพ์ลงในคำสั่งคลาสที่มีอยู่) ใน HTML ที่คุณไม่ต้องการให้ปรากฏในเวอร์ชันที่พิมพ์เช่นปุ่มของคุณ

เงินทุน 3 มีของตัวเองชั้นนี้เรียกว่า:

hidden-print

มันถูกกำหนดเช่นนี้:

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

คุณไม่จำเป็นต้องกำหนดด้วยตัวคุณเอง

ในBootstrap 4สิ่งนี้ได้เปลี่ยนเป็น:

.d-print-none

การปฏิบัติที่ดีที่สุดคือการใช้แผ่นลักษณะเฉพาะสำหรับการพิมพ์และและการตั้งค่าของแอตทริบิวต์mediaprint

ในนั้นแสดง / ซ่อนองค์ประกอบที่คุณต้องการที่จะพิมพ์บนกระดาษ

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

นี่เป็นวิธีง่ายๆในการใส่ CSS นี้

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

ไฟล์ CSS

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


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

HTML HEADER

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

ธาตุ

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

คุณสามารถวางลิงก์ภายใน div จากนั้นใช้ JavaScript บนแท็ก anchor เพื่อซ่อน div เมื่อคลิก ตัวอย่าง (ไม่ได้ทดสอบอาจต้องมีการปรับแต่ง แต่คุณจะได้ความคิด):

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

ข้อเสียคือเมื่อคลิกแล้วปุ่มจะหายไปและจะสูญเสียตัวเลือกนั้นในหน้า (มี Ctrl + P อยู่ตลอดเวลา)

ทางออกที่ดีกว่าคือการสร้างสไตล์ชีทการพิมพ์และภายในสไตล์ชีทนั้นระบุสถานะที่ซ่อนของprintOptionID (หรืออะไรก็ตามที่คุณเรียก) คุณสามารถทำได้ในส่วนหัวของ HTML และระบุสไตล์ชีทที่สองด้วยแอตทริบิวต์สื่อ

สิ่งที่ดีที่สุดที่ต้องทำคือการสร้างหน้าแบบ "พิมพ์อย่างเดียว"

โอ้เดี๋ยวก่อน ... นี่ไม่ใช่ปี 1999 อีกต่อไปแล้ว ใช้ CSS พิมพ์ด้วย "display: none"

คำตอบที่ได้รับการยอมรับโดย diodus ไม่ได้ผลสำหรับบางคนถ้าไม่ใช่พวกเราทุกคน ฉันยังคงซ่อนปุ่มพิมพ์ของฉันไม่ให้ไปที่กระดาษ

การปรับเล็กน้อยโดย Clint Pachl ของการเรียกไฟล์ css โดยการเพิ่ม

      media="screen, print" 

และไม่ใช่แค่

      media="screen"

กำลังแก้ไขปัญหานี้ ดังนั้นเพื่อความชัดเจนและเพราะมันไม่ใช่เรื่องง่ายที่จะเห็นคลินต์ Pachl ซ่อนความช่วยเหลือเพิ่มเติมในการแสดงความคิดเห็น ผู้ใช้ควรมี ", พิมพ์" ในไฟล์ 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">

ที่ฉันคิดว่าแก้ปัญหานี้สำหรับทุกคน

ถ้าคุณมี Javascript ที่รบกวนสไตล์ทรัพย์สินของแต่ละองค์ประกอบจึงเอาชนะ!importantผมขอแนะนำให้จัดการเหตุการณ์ที่เกิดขึ้นและonbeforeprint https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprintonafterprint