jquery colorbox 내용 인쇄

AJAX에 colorbox를 사용하여 페이지에 외부 HTML을 사용하고 있습니다.jquery colorbox 내용 인쇄

고객이 직접이 콘텐츠를 페이지에서 인쇄하려고하므로 colorbox의 onComplete 이벤트 훅을 사용하여 문서 머리 부분에로드 된 인쇄 CSS를 사용했습니다.

로드되는 내용은 인쇄 CSS로 덮어 쓸 수없는 인라인 스타일이있는 레거시 테이블의 뗏목이며 용지 유형별로 보면 레이아웃이 손상된 것 같습니다.

전체 페이지가 아닌 jQuery .find()를 사용하여 HTML 덩어리 만 검색하도록했습니다.

iframe을 colorbox와 함께 사용하고 헤더를 포함한 전체 HTML 문서를로드하는 것이 가장 좋을까요? 나는 이것이 청크를 검색하는 것보다 레이아웃을 더 잘 보존한다고 가정한다.

iframe의 콘텐츠를 인쇄하는 방법을 모르겠습니다. 내가 시도했을 때 중간에 iframe이있는 전체 페이지의 매우 작은 스냅 샷을 인쇄했습니다.

약간의 차이가 있습니다. 내가 사용하고

JQuery와는 다음과 같습니다

$('table.pricing > tbody > tr > th > p.price_report > a').colorbox({ 
    title: "Price report", 
    transition: "elastic", 
    innerWidth: "733px", 
    innerHeight: "699px", 
    opacity: "0.5", 
    onComplete:function(){ 
    // Ajax call to content 
    // insert Print CSS into head of document 

    } 

});

단지로드 본문 내용을 숨 깁니다 다음 #colorbox에서 모든 것을 표시되고 인쇄 CSS.

사과에 대한 모든 올바른 코드는 작동합니다.

출처

2010-07-15 RyanP13

1)) 나는 "인라인"colorbox 옵션으로 전환 제안 (하지만 당신은 필요가 없습니다 :

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".pricing").colorbox({width:"733px", height:"699px", iframe:false, open:true, overlayClose:true, opacity:.5, initialWidth:"300px", initialHeight:"100px", transition:"elastic", speed:350, close:"Close", photo:false, inline:true, href:"#price_report"}); 
}); 
</script>

2) 이제 인쇄 가능 영역을 작성하는 자바 스크립트 코드를 포함하여 HTML을 추가 :

<div style='display: none'> 
    <div id='price_report' class='pricing'> 



<script type="text/javascript"> 
//<!-- 

function ClickHereToPrint(){ 
    try{ 
     var oIframe = document.getElementById('ifrmPrint'); 
     var oContent = document.getElementById('pricingPrintArea').innerHTML; 
     var oDoc = (oIframe.contentWindow || oIframe.contentDocument); 
     if (oDoc.document) oDoc = oDoc.document; 
     oDoc.write("<html><head><title>My Printable Pricing Report!</title>"); 
     oDoc.write("<link rel='stylesheet' href='link-to-my-styles/style.css' type='text/css' />"); 
     oDoc.write("</head></body><body onload='this.focus(); this.print();' style='text-align: left; font-size: 8pt; width: 432pt;'>"); 
     oDoc.write("<h3>My Pricing Report</h3>"); 
     oDoc.write(oContent + "</body></html>");   
     oDoc.close();  
    } 
    catch(e){ 
     self.print(); 
    } 
} 

//--> 
</script> 




<iframe id='ifrmPrint' src='#' style="width:0pt; height:0pt; border: none;"></iframe> 

<div id="pricingPrintArea"> 

    <div class="myreport"> 
     <p>Hello, I am a pricing report!</p> 
    </div> 
</div> 


</div> 
</div>

3) 이제 당신이 원하는 어디든지 인쇄 버튼을 추가

<div id="print_btn"> 
<a href="#" onclick="ClickHereToPrint();" style="cursor: pointer;"> 
<span class="print_btn"> 
    Click Here To Print This Report! 
</span> 
</a> 
</div>

주, 빈 IFRA 나를 포함 자바 스크립트가 귀하의 인쇄 영역을 작성합니다 것입니다. 또한 자바 스크립트에서 스타일 시트, 인라인 스타일, 페이지 제목 등을 추가 할 수 있습니다.

이 프로세스는 colorbox의 ajax 버전과 유사하지만, ajax 메소드의 경로를 따라 가면 인쇄 가능한 div를 작성하고 iframe을 인쇄하고 javascript를 외부로 직접 인쇄해야합니다 파일.

이론적으로 인쇄 할 수있는 영역 div (이 예 : pricingPrintArea)의 내용이 인쇄되므로 인쇄 할 내용을 줄 바꿈 할 때마다 인쇄 할 수 있습니다.

중요 팁 : 프린터는 모두 웹 페이지를 다르게 읽으므로 인라인 스타일과 픽셀 크기를 인쇄 가능한 버전에 너무 많이 사용하지 마십시오. 이것이 인쇄 가능한 페이지를 위해 특별히 스타일 시트를 만드는 것이 좋은 이유입니다.

잘하면 답변을 귀하의 질문. (btw, 당신은이 방법을 colorbox의 ajax 메소드와 함께 사용할 수 있어야하지만, 테스트하지는 않았다).

출처

2010-07-15 21:22:01

jquery colorbox 내용 인쇄

답변

관련 문제