Làm cách nào để ẩn một phần tử khi in trang web?

Tôi có một liên kết trên trang web của tôi để in trang web. Tuy nhiên, liên kết cũng được hiển thị trong bản in.

Có mã javascript hoặc HTML nào sẽ ẩn nút liên kết khi tôi nhấp vào liên kết in không?

Thí dụ:

 "Good Evening"
 Print (click Here To Print)

Tôi muốn ẩn nhãn "In" này khi nó in dòng chữ "Chào buổi tối". Nhãn "In" không được hiển thị trên bản in.

Trong biểu định kiểu của bạn thêm:

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

Sau đó thêm class='no-print'(hoặc thêm lớp không in vào câu lệnh lớp hiện có) trong HTML mà bạn không muốn xuất hiện trong phiên bản in, chẳng hạn như nút của bạn.

Bootstrap 3 có nó riêng lớp cho điều này được gọi là:

hidden-print

Nó được định nghĩa như thế này:

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

Bạn không phải tự xác định nó.

Trong Bootstrap 4, điều này đã thay đổi thành:

.d-print-none

Thực hành tốt nhất là sử dụng một biểu định kiểu dành riêng cho in ấn và đặt mediathuộc tính của nó thành print.

Trong đó, hiển thị / ẩn các yếu tố mà bạn muốn được in trên giấy.

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

Đây là một giải pháp đơn giản đặt CSS này

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

và đây là 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>

TẬP TIN CSS

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


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

ĐẦU TIÊN HTML

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

THÀNH PHẦN

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

Bạn có thể đặt liên kết trong một div, sau đó sử dụng JavaScript trên thẻ neo để ẩn div khi nhấp vào. Ví dụ (không được thử nghiệm, có thể cần phải điều chỉnh nhưng bạn có ý tưởng):

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

Nhược điểm là một khi nhấp vào, nút sẽ biến mất và họ mất tùy chọn đó trên trang (luôn luôn có Ctrl + P).

Giải pháp tốt hơn là tạo một biểu định kiểu in và trong biểu định kiểu đó chỉ định trạng thái ẩn của printOptionID (hoặc bất cứ điều gì bạn gọi nó). Bạn có thể làm điều này trong phần đầu của HTML và chỉ định biểu định kiểu thứ hai với thuộc tính đa phương tiện.

Điều tốt nhất để làm là tạo một phiên bản "chỉ in" của trang.

Oh, đợi đã ... đây không phải là 1999 nữa. Sử dụng CSS in với "display: none".

Câu trả lời được chấp nhận bởi diodus không hoạt động đối với một số người nếu không phải tất cả chúng ta. Tôi vẫn không thể ẩn nút In này ra khỏi giấy.

Điều chỉnh nhỏ bằng Clint Pachl khi gọi tệp css bằng cách thêm vào

      media="screen, print" 

và không chỉ

      media="screen"

đang giải quyết vấn đề này Vì vậy, để rõ ràng và vì không dễ để thấy Clint Pachl ẩn trợ giúp bổ sung trong các bình luận. Người dùng nên bao gồm ", in" trong tệp css với định dạng mong muốn.

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

và không chỉ phương tiện mặc định = "màn hình".

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

Điều đó tôi nghĩ rằng giải quyết vấn đề này cho tất cả mọi người.

Nếu bạn có Javascript can thiệp vào thuộc tính kiểu của các thành phần riêng lẻ, do đó ghi đè !important, tôi khuyên bạn nên xử lý các sự kiện onbeforeprintvà onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onb Beforeprint