printing jquery colorbox content_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-07 18:19 出处：网络

I am using colorbox to AJAX some external HTML onto a page. My client wants to print this content direct from the page, therefore i used a print CSS loaded into the head of the document with colorbox

I am using colorbox to AJAX some external HTML onto a page.

My client wants to print this content direct from the page, therefore i used a print CSS loaded into the head of the document with colorbox's onComplete event hook.

The content that is loaded is a raft of legacy tables with inline styles which i can't seem to overwrite with the print CSS and when i view by media type the layout looks broken.

I put this down to only retrieving a chunk of the HTML with jQuery .find() rather than the whole page.

Would it be best to use an iframe with colorbox and load the whole HTML document including header. I assume this would preserve the layout better rather than retrieving a chunk.

I am not sure how to print the iframe's content. When i tried it printed an extremely small snapshot of the whole page with the iframe in the middle.

Am a bit lost on this one.

The jQuery i am using is as follows:

$('table.pricing > tbody > tr > th > p.price_report &开发者_如何学编程gt; 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 

    }

});

The print CSS that is loaded merely hides the body content and then displays everything under #colorbox.

Apologies all the proper code is at work.

1) I would suggest switching to the "inline" colorbox option (but you don't have to):

<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) Now add your html including the javascript and code to write your printable area:

<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) Now add the print button wherever you wish:

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

Note, the blank iframe included is where the javascript will write your printable area. You will also notice in the javascript that you can add a stylesheet, inline styles, a page title and more!

Keep in mind, this process will work similar for the ajax version of the colorbox, but if you go the route of the ajax method, you will have to write the printable div and print iframe and print javascript directly to that external file.

Theoretically, anything inside the printable region div (in this example: pricingPrintArea) will print, so as-long-as you wrap that around whatever you want to print, it will do so.

Important tip: Printers all read a Web page differently so try not to rely too much on inline styles and pixel dimensions for your printable version. That is why it is a good idea to create a stylesheet specifically for the printable page.

Hopefully that answers your question. (btw, you should be able to get this method to work with the ajax method of colorbox, but I haven't tested it).