打印jQuery的彩盒內容

我使用colorbox AJAX的一些外部HTML到頁面上。打印jQuery的彩盒內容

我的客戶希望直接從頁面打印此內容，因此我使用colorbox的onComplete事件掛鉤將打印CSS加載到文檔頭部。

加載的內容是一系列內聯樣式的遺留表格，我似乎無法用打印CSS覆蓋，當我通過媒體類型查看佈局看起來破損時。

我把它放在只用jQuery .find（）而不是整個頁面檢索HTML的塊。

是否最好使用帶colorbox的iframe並加載包括header在內的整個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）我建議切換到「內聯」顏色框選項（但你不必）：

<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包括JavaScript和代碼編寫您可打印區域：

<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包括我在內的JavaScript將寫入您的可打印區域。您還會注意到，您可以在JavaScript中添加樣式表，內聯樣式，頁面標題等等！

請記住，這個過程對於colorbox的ajax版本類似，但是如果你走ajax方法的路線，你將不得不編寫可打印的div並打印iframe並直接將javascript打印到該外部文件。

理論上，可打印區域div內的任何東西（在本例中爲：pricingPrintArea）都會打印出來，所以只要您將任何要打印的東西都打印出來，它就會打印出來。

重要提示：打印機所有人都以不同的方式讀取網頁，因此儘量不要過多地依賴於可打印版本的內聯樣式和像素尺寸。這就是爲什麼專門爲可打印頁面創建樣式表是一個好主意。

希望能回答你的問題。（順便說一句，你應該能夠得到這種方法與colorbox的ajax方法，但我沒有測試過）。

來源

2010-07-15 21:22:01

打印jQuery的彩盒內容

回答

相關問題