내 웹페이지에 웹페이지를 인쇄할 수 있는 링크가 있습니다. 그러나 링크는 인쇄물 자체에도 표시됩니다.
인쇄 링크를 클릭할 때 링크 버튼을 숨기는 자바스크립트 또는 HTML 코드가 있나요?
예:
"Good Evening"
Print (click Here To Print)
'좋은 저녁'이라는 텍스트를 인쇄할 때 이 '인쇄' 레이블을 숨기고 싶습니다. '인쇄' 레이블은 인쇄물 자체에 표시되지 않아야 합니다.
스타일시트에서 다음을 추가합니다:
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}
그런 다음 버튼과 같이 인쇄된 버전에 표시하지 않으려는 HTML에 class='no-print'
를 추가하거나 기존 클래스 문에 no-print 클래스를 추가합니다.
가장 좋은 방법은 **인쇄 전용 스타일시트를 사용하고 해당 스타일시트의 media
속성을 인쇄
로 설정하는 것입니다.
그 안에서 종이에 인쇄할 요소를 표시하거나 숨깁니다.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
부트스트랩에 3 은 [그 클래스용 İç 엔드입니다] [1] 호출됨:
hidden-print
다음과 같은 여길 수 있다.
@media print {
.hidden-print {
display: none !important;
}
}
[2] 이 [부트스트랩에 4] 에서 로 변경되었습니다.
.d-print-none
[1]: https://getbootstrap.com/docs/3.3/css/ # 응답성의 유틸리티와의 인쇄하십시오. [2]: https://getbootstrap.com/docs/4.3/utilities/display/ # 디스플레이 인쇄
이것은 단순한 솔루션 이거 CSS
<style>
@media print{
.noprint{
display:none;
}
}
< /style>;
html 은 avamar
<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 헤더입니다
<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를 사용하여 클릭 시 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
ID(또는 다른 이름으로 부르든)의 숨김 상태를 지정하는 것입니다. HTML의 헤드 섹션에서 이 작업을 수행하고 미디어 속성이 있는 두 번째 스타일시트를 지정할 수 있습니다.
우리 모두 않을 경우 일부 허용 오토메이티드 디오더스 의해 작동하지 않습니다. 나는 아직 내 에서 이 버튼를 인쇄하십시오 나가는 종이네) 를 숨길 수 없습니다.
Css 파일) 에 의해 조정량이 부르는 작은 클린트 프라클 추가하기만
media="screen, print"
뿐만 아니라
media="screen"
이 문제를 해결할 수 있다. 그래서 선명도와 쉽게 볼 수 있지 않기 때문에 추가 도움말에서는 클린트 프라클 감춰집니다 의견. 사용자가 " 포함시키십시오 print" 합니다;; css 에서 필요한 파일 포맷 중.
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">
기본 미디어 = " 아니라 screen"; 뿐입니다.
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">
이 문제를 해결할 수 있는 모든 사람을 위한 생각한다.
Javascript 를 줄 수 있는 경우 개별 요소 때문에 중요한 ',' 스타일 속성을 재정의을 론베포레프린트 '와' 이벤트 '내가 제안하세요 취급료 오나프터프린트!'. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint