CSS 페이징 인쇄 예제 코드 공유-CSS 튜토리얼-php.cn

CSS 페이징 인쇄 예제 코드 공유

小云云

풀어 주다： 2018-01-24 11:05:39

원래의

1760명이 탐색했습니다.

이 글은 CSS 페이징 프린팅의 샘플 코드에 대한 관련 정보를 주로 소개하고 있습니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

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

이런 불안한 순간, window.print() 메소드를 발견했는데, 윈도우 메소드를 직접 사용하여 인쇄 기능을 구현할 수 있다는 사실이 밝혀졌습니다. 황홀할 즈음, 먹구름이 조용히 내 머리 위로 덮쳤고, 내 삶은 갑자기 암울해졌습니다. 인쇄 기능을 구현할 수는 있지만 웹페이지를 일괄 인쇄하면 내용이 촘촘하게 뭉쳐지게 됩니다. 내가 이 문제를 완벽하게 해결할 수 있다고 생각했을 때, 인생이 항상 이렇게 불만족스러울 거라고 누가 생각이나 했겠는가. 페이징 인쇄 기능을 구현하는 방법을 계속 연구하는 것 외에는 다른 방법이 없습니다. 그때 가장 먼저 떠오른 것은 페이징할 마지막 컨테이너에 일정한 높이를 추가해 A4 용지 높이를 채우고 다음 내용이 자동으로 다음 페이지로 넘어가도록 하는 것이었습니다. 상상은 아름답지만 현실은 잔인하고 불만족스럽습니다. 나중에 동료에게 물어보니 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>

로그인 후 복사