1. Accueil
  2. Question et réponse
  3. impression jquery colorbox content

impression jquery colorbox content

2010-07-15 5 views
2

J'utilise colorbox pour AJAX HTML externe sur une page.impression jquery colorbox content

Mon client souhaite imprimer ce contenu directement à partir de la page, j'ai donc utilisé un CSS d'impression chargé dans la tête du document avec le hook d'événement onComplete de colorbox. Le contenu qui est chargé est une série de tables héritées avec des styles en ligne que je ne peux pas sembler écraser avec le CSS d'impression et quand je vois par type de support la disposition semble cassée.

Je l'ai mis à récupérer seulement un morceau du HTML avec jQuery .find() plutôt que la page entière.

Serait-il préférable d'utiliser un iframe avec colorbox et de charger le document HTML complet, y compris l'en-tête. Je suppose que cela permettrait de mieux préserver la mise en page plutôt que de récupérer un morceau.

Je ne sais pas comment imprimer le contenu de l'iframe. Quand je l'ai essayé, j'ai imprimé un très petit instantané de toute la page avec l'iframe au milieu.

Suis un peu perdu sur celui-ci.

Le jQuery j'utilise est la suivante:

$('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 

    } 

});

Le CSS d'impression est chargé cache simplement le contenu du corps et affiche alors tout sous #colorbox.

Excuses tout le bon code est au travail.

Source

2010-07-15 RyanP13

Répondre

3

1) Je vous suggère de passer à l'option colorbox « en ligne » (mais vous n'avez pas):

<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) Maintenant, ajoutez votre code html, y compris le javascript et le code pour écrire votre zone imprimable :

<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) maintenant, ajoutez le bouton d'impression où vous le souhaitez:

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

Remarque, le IFRA blanc moi inclus est où le javascript écrira votre zone imprimable. Vous remarquerez également dans le javascript que vous pouvez ajouter une feuille de style, des styles en ligne, un titre de page et plus encore! Gardez à l'esprit que ce processus fonctionnera de manière similaire pour la version ajax de la palette de couleurs, mais si vous utilisez la méthode ajax, vous devrez écrire la div imprimable et imprimer iframe et imprimer javascript directement à cette externe fichier. Théoriquement, tout ce qui se trouve dans la div imprimable (dans cet exemple: pricingPrintArea) s'imprimera, aussi longtemps que vous envelopperez ce que vous voulez imprimer, il le fera. Conseil important: Les imprimantes lisent toutes différemment une page Web, essayez donc de ne pas trop compter sur les styles en ligne et les dimensions en pixels de votre version imprimable. C'est pourquoi c'est une bonne idée de créer une feuille de style spécifiquement pour la page imprimable.

J'espère que cela répond à votre question. (btw, vous devriez être en mesure d'obtenir cette méthode pour travailler avec la méthode ajax de colorbox, mais je ne l'ai pas testé).

Source

2010-07-15 21:22:01

Questions connexes

 Questions connexes