CSS 페이징 인쇄

이번에는 CSS 페이징 인쇄에 대한 주의 사항을 알려드리겠습니다. 다음은 실제 사례입니다.

오랫동안 글을 쓰지 않았습니다. 최근 직원 온보딩 프로젝트를 진행했습니다. 시스템에 개인 정보 일괄 인쇄에 대한 기능적 요구 사항이 있습니다. 인쇄 기능을 접해 본 적이 없어서 온라인으로 확인해 보니 jquery에 인쇄 기능에 대한 API(PrintArea)가 있다는 것을 알게 되었는데, 이 API에 관심이 있으신 분들은 직접 관련 지식을 확인해 보시기 바랍니다. 여기서는 자세한 소개를 하지 않겠습니다. 그 당시 이 API를 사용하여 인쇄 기능을 구현하기로 결정했는데, 이 API를 사용하여 기능을 구현했을 때 실제로 브라우저의 인쇄 기능을 호출할 수는 있지만 인쇄된 내용이 아무런 정보도 없이 비어 있다는 사실을 발견했습니다. 그러다가 온라인으로 확인하고 API를 확인하기 위해 jquery 공식 홈페이지에 갔는데 대부분 예전에는 인쇄를 지원한다고 했었는데, 이제는 소스코드에 코드를 추가해야 해서 한참 작업하다가 포기했습니다. 이해하지 못하는 시간이 있지만 실현 가능해야 한다고 생각하지만 잘 하지 못합니다. 관심 있는 친구들이 시도해 보면 많은 것을 얻을 수 있을 것입니다. 이 계획이 효과가 없으면 계속해서 다른 옵션만 탐색할 수 있습니다.

이런 불안한 순간, window.print() 메소드를 발견했는데, 윈도우 메소드를 직접 사용하여 인쇄 기능을 구현할 수 있다는 사실이 밝혀졌습니다. 황홀할 즈음, 먹구름이 조용히 내 머리 위로 덮쳤고, 내 삶은 갑자기 암울해졌습니다. 인쇄 기능을 구현할 수는 있지만 웹페이지를 일괄 인쇄하면 내용이 촘촘하게 뭉쳐지게 됩니다. 내가 이 문제를 완벽하게 해결할 수 있다고 생각했을 때, 인생이 항상 이렇게 불만족스러울 거라고 누가 생각이나 했겠는가. 페이징 인쇄 기능을 구현하는 방법을 계속 연구하는 것 외에는 다른 방법이 없습니다. 그때 가장 먼저 떠오른 것은 페이징할 마지막 컨테이너에 일정한 높이를 추가해 A4 용지 높이를 채우고 다음 내용이 자동으로 다음 페이지로 넘어가도록 하는 것이었습니다. 상상은 아름답지만 현실은 잔인하고 불만족스럽습니다. 나중에 동료에게 물어보니 CSS 인쇄 속성을 사용해 강제 페이징을 구현할 수 있다고 하더군요. 그때 CSS 인쇄 속성을 확인해보니 문서 설명을 보고 벌써 희망이 보였습니다. 문서 지침에 따라 인쇄 속성을 사용하여 페이징을 강제했지만 결과가 예상과 달랐습니다. 나는 그 당시 이미 매우 우울했고 왜 그것이 효과가 없는지 알 수 없었지만 공식 문서에는 달성할 수 있다고 나와 있었기 때문에 여전히 포기하고 싶지 않았습니다. 어떻게 달성할 수 있는지에 대한 온라인 설명이 있는데 왜 달성할 수 없나요? 포기할 마음이 없어 결국 구현에 실패한 문제를 발견했습니다. 당시 제 상황은 이렇습니다. 출력할 내용은 제가 스플라이싱한 후 추가한 html이었습니다. 외부 컨테이너에 인쇄되어 현재로서는 CSS 인쇄 속성이 적용되지 않습니다. 따라서 앞으로 강제 페이징 기능을 구현하기 위해 CSS 인쇄 속성을 사용하려면 인쇄된 콘텐츠에 대한 외부 컨테이너가 하나만 있다는 점을 기억해야 합니다.

css 인쇄 속성은 다음과 같습니다:

페이징 예(여기의 온라인 예에서 빌려옴):

<p><input type="button" value="打印" onclick="Print()" /></p>  
<p id="page1">  
        <table width="100%"  border="0" cellpadding="0" cellspacing="0"  style="page-break-after:always" >  
        <tr><td>第一页打印内容</td></tr>  
        </table>  
</p>  
<p id="page2">  
        <table width="100%"  border="0" cellpadding="0" cellspacing="0" id="content" >  
        <tr><td>第二页打印内容</td></tr>  
        </table>  
</p>  
</body>  
</html>

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 내용을 보려면 주의하세요. PHP 중국어 웹사이트의 다른 관련 기사를 확인해보세요!

추천 도서:

CSS3 혼합 모드 사용에 대한 자세한 설명

H5 APP 청취 반환 이벤트 처리

위 내용은 CSS 페이징 인쇄의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!