JS를 사용하여 페이징 인쇄를 구현하는 방법
이번에는 JS를 사용하여 페이징 인쇄를 구현하는 방법과 JS를 사용하여 페이징 인쇄를 구현할 때 어떤 주의사항이 있는지 살펴보겠습니다.
window.print()
를 호출하면 인쇄 효과를 얻을 수 있지만 내용이 너무 많으면 페이징 인쇄가 필요합니다. window.print()
时,可以实现打印效果,但内容太多时要进行分页打印。
在样式中有规定几个打印的样式
page-break-before
和page-break-after
CSS属性并不会修改网页在屏幕上的显示,这两个属性是用来控制文件的打印方式。
每个打印属性都可以设定4种设定值:auto、always、left和right。其中Auto是默认值,只有在有需要时,才需设定分页符号 (Page breaks)。
page-break-before若设定成always,则是在遇到特定的组件时,打印机会重新开始一个新的打印页。
page-break-before若设定成left,则会插入分页符号,直到指定的组件出现在一个左边的空白页上。
page-break-before若设定成right,则会插入分页符号,直到指定的组件出现在一个右边的空白页上。
page-break-after属性会将分页符号加在指定组件后,而非之前。
在下列程序中您将可以看到这些属性的设定,
<HTML> <HEAD> <TITLE>Listing 14-4</TITLE> </HEAD> <BODY> <p>This is the first p.</p> <p STYLE="page-break-before:always">This is the second p.</p> <p STYLE="page-break-after:always">This is the third p.</p> <p>This is the fourth p.</p> <p STYLE="page-break-before:right">This is the fifth p.</p> <p STYLE="page-break-after:right">This is the sixth p.</p> <p>This is the last p.</p> </BODY> </HTML>
值 | 描述 |
auto | 默认值。如果必要则在元素前插入分页符 |
always | 在元素前插入分页符 |
avoid | 避免在元素前插入分页符 |
left | 在元素之前足够的分页符,一直到一张空白的左页为止 |
right | 在元素之前足够的分页符,一直到一张空白的右页为止 |
inherit | 规定应该从父元素继承 page-break-before 属性的设置 |
在Dom对象中pageBreakBefore属性
语法:
Object.style.pageBreakBefore=auto|always|avoid|left|right
page-break-before
및 page-break-after
CSS 속성에 여러 인쇄 스타일이 지정되어 있지만 웹 페이지의 모양은 수정되지 않습니다. 화면 표시에서 이 두 속성은 파일 인쇄 방법을 제어하는 데 사용됩니다. 각 인쇄 속성은 자동, 항상, 왼쪽, 오른쪽의 4가지 설정 값으로 설정할 수 있습니다. 그 중 자동은 기본값입니다. 페이지 나누기는 필요한 경우에만 설정하면 됩니다. 페이지 나누기 전이 항상으로 설정된 경우 프린터는 특정 구성 요소를 발견할 때 새 인쇄 페이지를 다시 시작합니다.
page-break-before를 왼쪽으로 설정하면 지정된 구성 요소가 왼쪽 빈 페이지에 나타날 때까지 페이지 나누기 기호가 삽입됩니다.
page-break-before를 오른쪽으로 설정하면 지정된 구성 요소가 오른쪽의 빈 페이지에 나타날 때까지 페이지 나누기 기호가 삽입됩니다. page-break-after 속성은 지정된 구성요소 앞이 아닌 뒤에 페이지 나누기 기호를 추가합니다.
<html> <head> <script type="text/javascript"> function setPageBreak() { document.getElementById("p2").style.pageBreakBefore="always"; } </script> </head> <body> <p>This is a test paragraph.</p> <input type="button" onclick="setPageBreak()" value="Set page-break" /> <p id="p2">This is also a test paragraph.</p> </body> </html>
value | 설명 |
자동 | 기본값. 필요한 경우 요소 앞에 페이지 나누기 삽입 |
항상 | 요소 앞에 페이지 나누기 삽입 |
요소 앞에 페이지 나누기 삽입 방지 | |
왼쪽 | 요소 앞에 페이지 나누기를 충분히, 한 페이지까지 삽입 왼쪽 빈 페이지까지 |
오른쪽 | 요소 앞에 충분한 페이지 나누기, 오른쪽 빈 페이지까지 | tr>
inherit | page-break-before 속성의 설정이 상위 요소에서 상속되어야 함을 지정합니다. |
Object.style.pageBreakBefore=auto|always| 회피|왼쪽|오른쪽
🎜rrreee🎜이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 자료: 🎜🎜🎜bison으로 인한 Mac 설치 중고품 오류 처리 방법🎜🎜🎜🎜🎜설치 후 Taobao cnpm을 올바르게 처리하는 방법 cnpm은 내부 또는 외부 명령이 아닙니다🎜🎜🎜위 내용은 JS를 사용하여 페이징 인쇄를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











인쇄해야 하는 파일을 열 때 인쇄 미리보기에서 어떤 이유로 인해 테이블 프레임 선이 사라진 것을 발견할 수 있습니다. 이러한 상황이 발생하면 인쇄에도 나타나는 경우 제때에 처리해야 합니다. file 이런 질문이 있으시면 에디터에 가입하여 다음 강좌를 배워보세요. Excel에서 표를 인쇄할 때 테두리 선이 사라지면 어떻게 해야 하나요? 1. 아래 그림과 같이 인쇄할 파일을 엽니다. 2. 아래 그림과 같이 필요한 콘텐츠 영역을 모두 선택합니다. 3. 아래 그림과 같이 마우스 오른쪽 버튼을 클릭하고 "셀 서식" 옵션을 선택합니다. 4. 아래 그림과 같이 창 상단의 "테두리" 옵션을 클릭하세요. 5. 아래 그림과 같이 왼쪽 선 스타일에서 가는 실선 패턴을 선택합니다. 6. '외부 테두리'를 선택하세요.

이 기사에서는 Microsoft Word에서 문서를 다시 페이지하거나 인쇄하기 위한 메모리나 디스크 공간 부족 문제를 해결하는 방법을 소개합니다. 이 오류는 일반적으로 사용자가 Word 문서를 인쇄하려고 할 때 발생합니다. 비슷한 오류가 발생하는 경우 이 문서에 제공된 제안 사항을 참조하여 문제를 해결하세요. 이 문서를 다시 페이지하거나 인쇄할 메모리나 디스크 공간이 부족합니다. Word 오류 "문서를 다시 페이지하거나 인쇄할 메모리나 디스크 공간이 부족합니다."라는 Microsoft Word 인쇄 오류를 해결하는 방법입니다. Microsoft Office 업데이트 메모리를 많이 차지하는 응용 프로그램 닫기 기본 프린터 변경 안전 모드에서 Word 시작 NorMal.dotm 파일 이름 바꾸기 Word 파일을 다른 이름으로 저장

이 디지털 세상에서 인쇄된 페이지의 필요성은 사라지지 않았습니다. 콘텐츠를 컴퓨터에 저장하고 프린터로 직접 보내는 것이 더 편리하다고 생각할 수도 있지만 iPhone에서도 동일한 작업을 수행할 수 있습니다. iPhone의 카메라를 사용하면 사진이나 문서를 찍을 수 있고, 언제든지 인쇄하기 위해 파일을 직접 저장할 수도 있습니다. 이렇게 하면 필요한 정보를 빠르고 쉽게 구체화하여 종이 문서에 저장할 수 있습니다. 직장에서든 일상생활에서든 iPhone은 휴대용 인쇄 솔루션을 제공합니다. 다음 게시물은 iPhone을 사용하여 프린터에서 페이지를 인쇄하려는 경우 알아야 할 모든 것을 이해하는 데 도움이 될 것입니다. iPhone에서 인쇄: Apple에 문의

Windows 11/10에서 캡처 도구를 사용하여 인쇄할 수 없는 경우 손상된 시스템 파일이나 드라이버 문제가 원인일 수 있습니다. 이 기사에서는 이 문제에 대한 해결책을 제공할 것입니다. Windows 11/10의 캡처 도구에서 인쇄할 수 없음 Windows 11/10의 캡처 도구에서 인쇄할 수 없는 경우 다음 해결 방법을 사용하십시오. PC 프린터 다시 시작 인쇄 대기열 지우기 프린터 및 그래픽 드라이버 업데이트 캡처 도구 수정 또는 재설정 SFC를 실행하고 DISM 스캔은 PowerShell 명령을 사용하여 캡처 도구를 제거하고 다시 설치합니다. 시작하자. 1] PC와 프린터 다시 시작 PC와 프린터를 다시 시작하면 일시적인 결함을 제거하는 데 도움이 됩니다.

실수로 대용량 파일을 인쇄하셨나요? 잉크와 종이를 절약하기 위해 인쇄를 중지하거나 일시 중지해야 합니까? Windows 11 장치에서 진행 중인 인쇄 작업을 일시 중지해야 하는 상황이 많이 있습니다. Windows 11에서 인쇄를 일시 중지하는 방법은 무엇입니까? Windows 11에서 인쇄를 일시 중지하면 인쇄 작업이 일시 중지되지만 인쇄 작업이 취소되지는 않습니다. 이는 사용자에게 보다 유연한 제어를 제공합니다. 이를 수행하는 방법에는 세 가지가 있습니다. 작업 표시줄을 사용하여 인쇄 일시 중지 Windows 설정을 사용하여 인쇄 일시 중지 제어판을 사용하여 인쇄 이제 이에 대해 자세히 살펴보겠습니다. 1] 작업 표시줄을 사용하여 인쇄 작업 표시줄의 인쇄 대기열 알림을 마우스 오른쪽 버튼으로 클릭합니다. 모든 활성 프린터 옵션을 열려면 클릭하세요. 여기에서 인쇄 작업을 마우스 오른쪽 버튼으로 클릭하고 모두 일시 중지를 선택합니다.

Word를 사용하여 편지 병합 문서를 인쇄할 때 빈 페이지가 나타나는 경우 이 문서가 도움이 될 것입니다. 메일 병합은 개인화된 문서를 쉽게 작성하여 여러 수신자에게 보낼 수 있는 편리한 기능입니다. Microsoft Word에서 메일 병합 기능은 사용자가 각 수신자에 대해 동일한 콘텐츠를 수동으로 복사하는 데 소요되는 시간을 절약해 주기 때문에 높은 평가를 받고 있습니다. 편지 병합 문서를 인쇄하려면 우편물 탭으로 이동하세요. 그러나 일부 Word 사용자는 메일 병합 문서를 인쇄하려고 할 때 프린터에서 빈 페이지가 인쇄되거나 전혀 인쇄되지 않는다고 보고했습니다. 이는 잘못된 형식이나 프린터 설정 때문일 수 있습니다. 문서 및 프린터 설정을 확인하고 인쇄하기 전에 문서를 미리 확인하여 내용이 올바른지 확인하세요. 만약에

Outlook은 가장 기능이 풍부한 이메일 클라이언트 중 하나이며 전문적인 커뮤니케이션에 없어서는 안될 도구가 되었습니다. 문제 중 하나는 Outlook에서 모든 첨부 파일을 동시에 인쇄하는 것입니다. 일반적으로 인쇄하기 전에 첨부 파일을 하나씩 다운로드해야 하지만 모든 것을 한 번에 인쇄하려는 경우 대부분의 사람들이 직면하는 문제입니다. Outlook에서 모든 첨부 파일을 인쇄하는 방법 대부분의 정보는 Outlook 응용 프로그램에서 온라인으로 유지되지만 백업을 위해 정보를 인쇄해야 하는 경우가 있습니다. 계약서, 정부 양식, 숙제 등 법적 요구 사항을 충족하려면 문서에 직접 서명해야 합니다. Outlook의 모든 첨부 파일을 하나씩 인쇄하는 대신 한 번의 클릭으로 인쇄할 수 있는 여러 가지 방법이 있습니다. 각각을 자세히 살펴보겠습니다. 아웃루

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술
