JavaScript CSS 제어 인쇄 형식 예제 소개_javascript 기술

1. media="print"의 CSS를 사용하여 인쇄할 파일의 스타일인 testPrint.html을 제어합니다. 이는 미디어를 인쇄로 참조합니다. 즉, 스타일은 인쇄할 때만 적용됩니다.

코드 복사 코드는 다음과 같습니다.

/style/print.css 파일

복사 code 코드는 다음과 같습니다.

.noprint{display:none;}

print.css의 스타일 사용 testPrint.html, 웹 페이지를 검색할 때 효과가 표시되지 않지만 다음 단락과 같이 인쇄할 때는 작동합니다. noprint를 추가한 후에도 브라우저에서는 여전히 현실적이지만 인쇄할 때는 표시되지 않습니다.

코드 복사 코드는 다음과 같습니다.

물론 print.css에 원하는 스타일을 작성하고 색상을 변경할 수 있습니다(컬러 이미지 흑백 프린터에서는 효과가 좋지 않습니다. 다른 스타일로 인쇄할 수 있습니다). 글꼴 등 무엇이든 다음과 같이 사용할 수 있습니다. 당신은 좋아합니다 -------------------- --------------- --------------

2. JavaScript를 사용하여 제어

이러한 이유 , 일부 사람들은 CSS에 능숙하지 않을 수도 있고 일부 사람들은 JavaScript를 더 잘할 수도 있습니다. 때로는 JavaScript도 좋은 선택입니다

코드 복사 코드는 다음과 같습니다. test">이 텍스트는 인쇄되지 않습니다

인쇄하기 전에 window.onbeforeprint 함수가 호출됩니다. 이때 창의력을 발휘하여 html과 그런 다음 인쇄하십시오. 물론, 인쇄한 후에는 보통 다시 가져와야 하는데, 이것이 window.onafterprint 함수입니다

------------------------- --------- --------

팁 : 주의하세요. 우리 모두는 인쇄에 대해 알고 있습니다. 그것은 window.print()입니다. 실제로 window.top.centerFrame.MainFrame.print()와 같은 프레임을 인쇄할 수도 있습니다.