✨ div를 인쇄하는 간단한 방법

WBOY
풀어 주다: 2024-08-02 04:25:02
원래의
717명이 탐색했습니다.

✨ Simple trick for printing a div

장점

  • 인쇄 후에도 페이지의 상호작용이 유지됩니다
  • 프레임워크와 잘 작동합니다
  • 인쇄를 위해 UI를 복제할 필요가 없습니다

단계

  1. 인쇄 모드에서 페이지의 모든 내용 숨기기
  2. 인쇄 모드에서 대상 요소를 표시하세요

1단계

@media print {
  body {
    visibility: hidden;
  }
}
로그인 후 복사

2단계

@media print {
  #section-to-print {
    top: 0;
    left: 0;
    position: absolute;
    visibility: visible;
  }
}
로그인 후 복사

그런 다음 인쇄하세요

const button = document.querySelector('print-page');

button.addEventListener('click', () => window.print());
로그인 후 복사

이 방법은 상호작용성을 잃는 위험을 방지하며, 다른 방법은 전체 페이지 콘텐츠를 정적 HTML로 대체하여 상호작용성을 상실합니다.

const printContents = document.getElementById(divId).innerHTML;
const originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;
로그인 후 복사

위 내용은 ✨ div를 인쇄하는 간단한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!