인쇄 전 자바스크립트 수정

JavaScript는 웹 애플리케이션에서 널리 사용되는 스크립팅 언어입니다. 웹 개발 과정에서 프린팅 기능은 필수인데, 단순히 브라우저의 프린팅 기능을 사용하는 것만으로는 만족스럽지 못한 결과를 낳을 수 있습니다. 따라서 이 기사에서는 더 나은 인쇄 효과를 얻기 위해 JavaScript에서 인쇄된 페이지의 스타일과 내용을 수정하는 방법을 소개합니다.

1. 스타일 수정

1. @media 미디어 쿼리 사용

@media 미디어 쿼리는 스타일 시트가 특정 미디어 유형의 장치에만 적용되도록 스타일 시트에 @media 규칙을 사용하는 것을 의미합니다. 인쇄하기 전에 @media 규칙을 사용하여 인쇄된 페이지가 더 적합하도록 인쇄된 페이지의 스타일을 수정할 수 있습니다.

샘플 코드는 다음과 같습니다.

@media print {
  /* 在这里定义修改的样式 */
}

위 코드에서 @media print는 프린터에서 사용하는 미디어 유형에 맞게 수정하고 싶다는 뜻이며, 여기서 배경색 설정과 같은 다양한 스타일을 추가할 수 있습니다.

@media print {
  body {
    background-color: #fff;
  }
}

이 예에서는 인쇄된 페이지의 배경색을 흰색으로 설정했습니다.

@media 규칙에서는 페이지 크기 및 방향 설정과 같은 다른 스타일을 추가할 수도 있습니다.

@media print {
  @page {
    size: A4 portrait; /* 竖向A4页面 */
  }
}

위 코드에서 @page 규칙은 페이지 크기와 방향 및 크기 속성을 설정하는 데 사용됩니다. 페이지 크기를 설정하는 데 사용됩니다. 세로는 페이지 방향이 세로임을 나타냅니다.

2. 인쇄 스타일 시트를 사용하세요

인쇄 스타일 시트는 인쇄를 위해 특별히 준비된 스타일이 포함된 특별한 스타일 시트를 말합니다. 이를 사용하여 인쇄하기 전에 인쇄된 페이지의 스타일을 수정할 수 있습니다.

샘플 코드는 다음과 같습니다.

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

위 코드에서는 HTML 파일에 print.css라는 스타일 시트를 도입하고 스타일 시트의 미디어 속성을 인쇄로 설정했습니다.

print.css 스타일 시트에서는 인쇄용으로 특별히 준비된 스타일을 추가할 수 있습니다. 예:

body {
  font-size: 12pt;
  line-height: 1.5;
}

위 코드에서는 인쇄된 페이지의 글꼴 크기를 12pt로, 줄 높이를 1.5로 설정했습니다.

인쇄 스타일 시트를 사용하면 원래 스타일에 영향을 주지 않고 스타일을 보다 유연하게 수정할 수 있습니다.

2. 내용 수정

1. 불필요한 요소 숨기기

인쇄된 페이지에서는 일반적으로 메뉴, 광고 등 일부 요소를 표시할 필요가 없습니다. 이러한 요소는 종이를 낭비하고 인쇄 효과에 영향을 미치기 때문입니다. . 따라서 JavaScript를 사용하여 인쇄하기 전에 이러한 요소를 숨길 수 있습니다.

샘플 코드는 다음과 같습니다.

window.onload = function() {
  var printBtn = document.getElementById('printBtn');
  printBtn.onclick = function() {
    // 隐藏不必要的元素
    document.getElementById('menu').style.display = 'none';
    document.getElementById('ad').style.display = 'none';
    
    // 执行打印操作
    window.print();
    
    // 恢复元素的显示
    document.getElementById('menu').style.display = 'block';
    document.getElementById('ad').style.display = 'block';
  }
}

위 코드에서는 먼저 ID가 printBtn인 버튼을 얻고 클릭 이벤트를 바인딩합니다. 이벤트 핸들러에서는 JavaScript를 통해 표시 속성을 'none'으로 설정하여 id 메뉴와 광고가 있는 두 요소를 숨깁니다. 다음으로 인쇄 작업을 수행한 다음 인쇄 후 이러한 요소의 표시 속성을 'block'으로 설정하여 표시를 복원합니다.

인쇄하기 전에 요소를 숨기면 인쇄 효과가 더 깔끔해진다는 점은 주목할 만하지만, 기능 구현 시 숨겨진 요소가 페이지의 다른 기능에 영향을 미치지 않는다는 점에 유의해야 합니다.

2. 인쇄 머리글 및 바닥글 추가

인쇄 머리글 및 바닥글에는 일반적으로 인쇄 시간, 파일 이름 등과 같은 몇 가지 중요한 정보가 포함됩니다. 인쇄하기 전에 JavaScript를 사용하여 인쇄 머리글과 바닥글을 추가할 수 있습니다.

샘플 코드는 다음과 같습니다.

window.onload = function() {
  var printBtn = document.getElementById('printBtn');
  printBtn.onclick = function() {
    // 添加打印页眉
    var header = '<div style="text-align:center;font-size:14pt;">打印页眉</div>';
    document.body.insertAdjacentHTML('beforebegin', header);
    
    // 添加打印页脚
    var footer = '<div style="text-align:center;font-size:12pt;">打印页脚</div>';
    document.body.insertAdjacentHTML('afterend', footer);
    
    // 执行打印操作
    window.print();
    
    // 删除打印页眉和页脚
    document.body.previousSibling.remove();
    document.body.nextSibling.remove();
  }
}

위 코드에서는 먼저 ID가 printBtn인 버튼을 얻고 클릭 이벤트를 바인딩합니다. 이벤트 핸들러에서는 JavaScript를 통해 각각 인쇄 머리글과 바닥글을 추가했습니다. 그 중 insertAdjacentHTML() 메소드는 HTML 코드를 문서의 특정 위치에 삽입하는 데 사용됩니다. beforebegin은 현재 요소 앞에 삽입하는 것을 의미하고 afterend는 현재 요소 뒤에 삽입하는 것을 의미합니다. 여기에서는 머리글과 바닥글을 올바른 위치에 추가하기 위해 beforebegin과 afterend를 각각 사용했습니다.

다음으로 인쇄 작업을 수행한 후 인쇄가 완료된 후 다른 기능에 영향을 미치지 않도록 JavaScript를 통해 문서에서 인쇄 머리글과 바닥글을 삭제했습니다.

요약

JavaScript를 통해 인쇄된 페이지의 스타일과 내용을 수정하면 인쇄 효과를 더욱 이상적으로 만들고 사용자 경험을 향상시킬 수 있습니다. 기능을 구현할 때 페이지의 호환성과 사용성에 주의를 기울여 불필요한 문제를 최대한 피해야 합니다.

위 내용은 인쇄 전 자바스크립트 수정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!