페이지의 일부를 인쇄 javascript

나는 문제가있다. div에있는 내용 만 인쇄하려고합니다. 기본적으로 아래의 모든 내용이 아래 그림과 같습니다. preing preview 페이지의 일부를 인쇄 javascript

즉 : Div content

하지만 내가 인쇄하려고은, 결과는 다음과 같이 보입니다 어떤 스타일 시트도없이.

그러나 코드에는 현재 가지고있는 모든 CSS 파일이 포함되어 있습니다.

이것은 내가 가지고있는 기능입니다. 스타일 시트와 함께 사용하거나 사용하지 않고 시도해 보았습니다. 아무도 내가 잘못하고있는 것을 볼 수 있습니까?

function PrintHistory() { 
     var printDivCSS5 = new String(
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.core.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.resizable.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.selectable.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.accordion.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.autocomplete.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.button.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.dialog.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.slider.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.tabs.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.datepicker.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.progressbar.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jquery.ui.theme.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jqGrid.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/jqgrid-smoothness-ui.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/datepicker.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/ui.fancytree.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/site.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/bootstrap.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/Hepper.mms.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/bootstrap-select.css">' + 
      '<link rel="stylesheet" type="text/css" href="http://localhost:62533/Content/themes/base/typeahead.css">'); 

     var oldPage = document.body.innerHTML; 
     var prtContent = document.getElementById("historyTabeTarget"); 
     var WinPrint = window.open('', '', 'letf=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status=0'); 
     WinPrint.document.write("<html><head><title></title></head><body>" + printDivCSS5 + prtContent.innerHTML + "</body>"); 
     WinPrint.document.close(); 
     WinPrint.focus(); 
     WinPrint.print(); 
     WinPrint.close(); 
     prtContent.innerHTML = oldPage; 
    };

출처

2014-10-07 mortenstarck

무엇을 기대합니까? 제목 뒤에 파란색 배경과 내용 뒤에 회색 배경? 그렇다면 브라우저가 인쇄 할 때 배경색과 이미지를 사용하지 않는 경향이 있으므로 (잉크를 절약하기 위해) 잘못된 점이 없습니다. –

[CSS 인쇄 매체] (https://developer.mozilla.org/en-US/docs/Web/CSS/@media)에 대해 들어 보셨습니까? – epascarello

나는 이것이 CSS에 의해 달성 될 수 있다고 생각한다. 스타일 시트에 인쇄 할 CSS 사양이있는 다음을 추가하기 만하면됩니다. 당신이 인쇄하고자하고 그에 따라 나머지 CSS를 오버라이드 (override)하지 않는 모든 요소에 대한

@media print{ 
    /* your print css */ 
}

사용 display: none;.

출처

2014-10-07 13:40:23 StrongBite

페이지의 일부를 인쇄 javascript

답변

관련 문제