jquery: imprimer élément caché

Question

J'utilise le plug-in jQuery Imprimer Element pour l'impression, mais je pense que c'est une question générale css:

Comment imprimer un élément caché? (avec css mis à afficher: aucun;)

en essayant, je suis seulement une feuille ordinaire. y-a-t'il une solution?

grâce

Answer 1

Comme le suggère DN, l'utilisation d'une feuille de style imprimée fonctionnera bien. Dans la feuille de style d'impression, définissez votre règle css sur #element {display:block}.

Je regarde le jQuery.printElement Options, et il y a une option overrideElementCSS. Cela semble être juste ce dont vous avez besoin. Voici l'exemple de code:

$("#element").printElement( 

      { 

      overrideElementCSS:[ 

     'thisWillBeTheCSSUsed.css', 

     { href:'thisWillBeTheCSSUsedAsWell.css',media:'print'}] 

      }); 

Remplacer thisWillBeTheCSSUsedAsWell.css avec le chemin de votre feuille de style d'impression qui a la règle #element {display:block}.

Answer 2

Avez-vous inclus un print stylesheet?

Answer 3

esprit vous que jQueryUI utilise

{display:none !important;} 

!important signifie que vous ne pouvez pas remplacer avec l'impression stylesheet à moins que vous aussi définir !important (et je pense que vous avez aussi un lien vers votre feuille de style d'impression première dans la page en-tête avant les trucs jQuery)

Answer 4

Il semble qu'il ne pourrait imprimer que des éléments visibles. Dans mon cas, ce qui suit travaillé

<div id="to-be-printed" style="position:absolute;z-index:-9999;"> 
    <%= render :partial => "printed_version"%> 
</div> 
<div id="to_be_printed_cover" style="position:absolute;z-index:-8999;background-color:white;"> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $("div#to_be_printed_cover").css({ 
     height: $("div#to_be_printed").height(), 
     width: $("div#to_be_printed").width(), 
    }); 
    }); 
    </script> 
</div> 

j'ai gardé l'élément principal (à imprimer visible et absolu), et maintenu une au-dessus de celui-ci apparaisse comme caché.

Answer 5

Vous pouvez également envelopper votre élément dans une div et appliquer l'affichage: none; à cela

 <div style="display: none;"> 
      <div id="printable-area"> 
       <h1>Lorem ipsum</h1> 
       <p>Lorem ipsum dolor sit amet</p> 
      </div> 
     </div>