자바스크립트에서 인쇄할 내용의 일부를 선택한 후 양식 내용이 사라지는 이유는 무엇입니까?

JavaScript 인쇄할 내용의 일부를 선택할 때 양식 내용이 사라지는 경우가 있는데, 이는 브라우저가 인쇄 시 기본적으로 페이지에 보이는 부분만 인쇄하기 때문이며, 양식 부분은 일반적으로 ​따라서 페이지는 기본적으로 무시됩니다. 이 기사에서는 이 문제를 해결하는 방법을 보여줍니다.

문제 설명

JavaScript의 window.print() 메서드를 사용하여 페이지를 인쇄할 때 양식 내용의 일부가 인쇄되지 않고 페이지에서 보이는 부분만 인쇄되는 경우가 종종 있습니다. 브라우저의 기본 동작은 페이지의 보이는 부분만 인쇄하는 것이고, 양식 부분은 일반적으로 페이지의 보이는 영역이 아닌 숨겨져 있으므로 기본적으로 무시되기 때문입니다.

Solution

이 문제를 해결하려면 CSS에서 @media 미디어 쿼리를 사용해야 합니다. @media 미디어 쿼리는 다양한 미디어 유형을 기반으로 웹 페이지에 다양한 스타일 시트를 제공하여 다양한 터미널 장치에 적용할 수 있는 CSS 기술입니다. @media 미디어 쿼리를 사용하여 인쇄 시 양식이 표시되는 방식을 제어할 수 있습니다.

구체적인 구현 단계는 다음과 같습니다.

1. CSS 스타일 시트에서 @media 미디어 쿼리 정의:

@media print {
    /* 这里写规则 */
}

2. @media 미디어 쿼리에서 양식의 표시 규칙 작성:

@media print {
    form {
        display: block;
        visibility: visible;
    }
}

In the 위 코드에서는 인쇄 시 양식의 표시 효과를 제어하기 위해 표시 및 가시성 두 가지 속성을 사용합니다. 양식을 표시하려면 표시 속성을 차단으로 설정하고, 인쇄할 때 양식을 표시하려면 가시성 속성을 표시로 설정하세요.

3. @media 미디어 쿼리에 인쇄할 때 페이지 스타일을 작성하세요.

@media print {
    form {
        display: block;
        visibility: visible;
    }
    
    /* 这里写其他规则，如文字大小、背景图等 */
}

위 코드에서 텍스트 크기, 배경 이미지 등과 같은 다른 규칙을 추가하여 더 나은 인쇄 효과를 얻을 수도 있습니다. .

4. HTML 페이지의 JavaScript에서 window.print() 메서드를 호출합니다.

마지막으로 HTML 페이지의 JavaScript에서 window.print() 메서드를 호출합니다. 이때 양식 부분이 이미 포함되어 있어야 합니다. 인쇄 창 내용에서.

<button onclick="window.print()">打印</button>

Summary

본 글에서는 자바스크립트에서 인쇄할 내용의 일부를 선택할 때 양식 내용이 사라지는 문제를 소개하고, 이 문제를 해결하기 위해 @media 미디어 쿼리를 사용하는 방법을 제안합니다. @media 미디어 쿼리에 규칙을 설정하면 인쇄 시 양식이 올바르게 표시되도록 하여 더 나은 인쇄 결과를 얻을 수 있습니다.

위 내용은 자바스크립트에서 인쇄할 내용의 일부를 선택한 후 양식 내용이 사라지는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!