IE9에서는 인쇄하는데 문제가 없는데, IE6, 7, 8에서는 처음 몇 페이지가 공백으로 나옵니다.(열 헤더 정보만 표시됩니다.) 한참 검색해보니 ui-jqgrid- 입니다. bdiv 스타일 클래스(ui.jqgrid.css 에서 오버플로로 인해 발생함)를 인쇄하기 전에 삭제하고 인쇄한 후에 복원합니다.
인쇄 시 CSS 스타일은 다음과 같습니다.
< style type="text/css" media="print">
#accordion h3, #vcol, div.loading, div.ui-tabs-hide,ul.ui-tabs-nav li , td.HeaderRight { 디스플레이: 없음 }
.ui-jqgrid-titlebar, .ui-jqgrid-title{ 디스플레이: 없음 }
.ui-jqgrid-bdiv_self{위치: 상대; 여백: 0em; 0; text-align :left;}
#pager{display:none; z-index:-1;}
코드 인쇄:
$("#btnPrint").live("click ", function () {
window.focus();
window.print();
false를 반환합니다.
});
var GridHeight;
function window.onbeforeprint( ) {
//사전 이벤트 인쇄 var jqgridObj=jQuery("#jqgridlist");
GridHeight = jqgridObj.jqGrid('getGridParam', 'height');//높이 가져오기 jqgridObj.jqGrid(' setGridHeight', '100%');/ / 높이를 100%로 설정합니다. 주로 jqgrid에 스크롤 막대가 있을 때 스크롤 막대의 모든 내용을 인쇄할 수 있습니다. $("#gview_jqgridlist .ui-jqgrid -bdiv").removeClass().addClass("ui -jqgrid-bdiv_self");//오버플로 속성 제거}
function window.onafterprint() {//인쇄 후 이벤트//숨겨진 요소 해제
$("#gview_jqgridlist .ui-jqgrid-bdiv_self ").removeClass().addClass("ui-jqgrid-bdiv");//오버플로 속성을 복원합니다. 그렇지 않으면 jqgrid의 스크롤 막대가 사라집니다. jQuery("#jqgridlist" ).jqGrid('setGridHeight', GridHeight);/ /인쇄 전 높이 설정}
CSS 미디어 속성 소개:
미디어 유형을 사용하면 문서가 인쇄되는 매체를 정의할 수 있습니다. 제출됩니다. 문서는 모니터, 종이 매체, 청각 브라우저 등에 표시될 수 있습니다.
미디어 유형
일부 CSS 속성은 특정 미디어만을 대상으로 설계되었습니다. 예를 들어, "voice-family" 속성은 사용자 터미널을 듣기 위해 설계되었습니다. 다른 속성은 다른 미디어에서 사용할 수 있습니다. 예를 들어, "글꼴 크기" 속성은 인쇄 매체뿐만 아니라 모니터에도 사용될 수 있지만 값이 다를 수 있습니다. 모니터에 표시되는 문서는 일반적으로 종이에 있는 문서보다 더 큰 글꼴 크기가 필요합니다. 동시에 산세리프 글꼴은 모니터에서 읽기 쉽고, 세리프 글꼴은 종이에서 읽기 쉽습니다.
@media 규칙
@media 규칙을 사용하면 동일한 스타일 시트에서 다양한 미디어에 대해 다양한 스타일 규칙을 사용할 수 있습니다.
아래 예의 스타일은 브라우저가 모니터의 14픽셀에 Verdana 글꼴을 표시하도록 지시합니다. 그러나 페이지를 인쇄해야 하는 경우에는 10픽셀 Times 글꼴이 사용됩니다. 참고: 디스플레이 또는 종이 매체에 관계없이 글꼴 두께는 굵게 설정됩니다.
