jQuery는 HTML 페이지의 지정된 영역을 인쇄하고 자동으로 paginates_jquery를 수행합니다.
- WBOY원래의
- 2016-05-16 16:42:281505검색
최근 프로젝트에서 HTML 페이지를 인쇄해야 하는 경우 jquery.PrintArea.js 플러그인을 사용하세요.
사용법:
$("div#printmain").printArea();
그러나 DIV 뒤에 있는 콘텐츠는 계속 인쇄됩니다. CSS를 사용하여 인쇄 페이지를 제어할 수 있습니다.
<div style="page-break-after: always;"></div>
CSS를 사용하여 페이징을 제어하더라도 페이지가 계속 인쇄되는 경우가 있습니다. 여기에서는 PrintArea 플러그인의 속성 매개변수를 사용할 수 있습니다.
PrintArea 부분 소스 코드:
var modes = { iframe : "iframe", popup : "popup" };
var defaults = { mode : modes.iframe,
popHt : 800,
popWd : 800,
popX : 200,
popY : 200,
popTitle : '',
popClose : false ,
twoDiv : '', //自已扩展的属性，为满足变态需求
pageTitle: ''};//自已扩展的属性，为满足变态需求
플러그인에 정의된 속성 형식이 JSON임을 알 수 있습니다. 아래에서는 일부 속성을 소개합니다
modes는 두 가지 속성을 정의합니다. 팝업이 지정되면 인쇄 미리보기 페이지로 간주할 수 있는 새 창이 열립니다. 기본값은 iframe입니다.
@popClose | [boolean] (false),true 인쇄가 완료된 후 미리보기 페이지를 열고 닫을지 여부는 기본값은 false입니다(닫지 않음).
$("div#printmain").printArea({mode:"popup",popClose:true});
이 방법으로 DIV 인쇄를 지정할 수 있습니다.
제가 추가한 두 가지 새로운 속성의 목적에 대해 이야기해 보겠습니다.
twoDiv:
인쇄해야 할 두 번째 DIV는 물론 두 번째 페이지가 됩니다. 이 페이지는 상대적으로 길고 자동 페이징이 필요하며 테이블의 각 행은 여러 행에 걸쳐 인쇄됩니다. 종이 두 장에.
페이지 제목:
두 번째 DIV는 여러 페이지로 나누어져 있으며 각 페이지의 헤더는 동일해야 합니다. 이 매개변수는 공통 헤더입니다.
이 두 매개변수는 다음과 같이 페이지의 DIV에 해당합니다.
<div id="pageTitle" style="display: none;">
페이지가 정의된 후 플러그인에서 페이지가 어떻게 처리되는지 살펴보겠습니다.
writeDoc.open(); writeDoc.write(html); //打找一个窗口关写窗口中的HTML代码 writeDoc.close(); printWindow.focus(); printWindow.print();
다음은 html을 생성하는 코드입니다
html+=docType() + "<html>" + getHead() + getBody(thisPage) + "</html>";
상호 의미 방법은 플러그인에 정의되어 있으므로 수정하지 않았으므로 여기에는 붙여넣지 않겠습니다.
내 생각은 다음과 같습니다.
DIV의 콘텐츠를 여러 페이지로 나누고 한 줄이 여러 페이지에 걸쳐 있지 않도록 해야 한다면 HTML 코드를 생성하는 데 열심히 노력해야 합니다.
먼저 DIV에서 모든 행을 찾습니다. 이러한 행을 추가한 후 공통 테이블 헤더의 높이가 한 페이지에 도달하면 페이징이 필요합니다. 여기서 페이지의 마지막 행은 여러 페이지에 걸쳐 발생하며 이 행을 저장합니다. 내려와서 다음 페이지에 올려주세요.
각 페이지가 생성된 후 HTML 태그 뒤에 CSS 페이지 매기기 태그를 추가해야 프린터가 순순히 페이지 매김을 수행합니다.
설명하자면, 생성된 미리보기 페이지는 해당 헤더와 DTD 정보가 포함된 HTML 페이지입니다.
미리보기에는 4페이지만 있는 것으로 아시는 분들도 계시겠지만, 인쇄할 때 항상 한 페이지가 더 있게 됩니다. 이 경우 생성한 페이지의 페이지 매김 표시가 HTML 태그 앞에 있는지 확인해야 합니다. .
패싯 태그는 HTML 태그 뒤에 있어야 하며, 이렇게 하면 한 페이지를 더 인쇄하는 문제를 해결할 수 있습니다.
PS:
내 프로젝트 주기 때문에 이 인쇄 문제를 해결하기 위해 수정된 JS 플러그인을 아래에 업로드하겠습니다. 코드가 매우 지저분합니다. 자세히 살펴보시기 바랍니다
동료들은 또한 누군가가 이를 최적화하고 보편적으로 만들 수 있기를 바랍니다.