de windows.imprimer les résultats dans la page vide

J'essaye d'ajouter un bouton imprimer une page html. La plupart de la page n'est pas censé apparaître dans la presse, j'ai donc tout cacher dans l'imprimer, puis de révéler que l'un div qui est censé être imprimé (ou c'est ce que je suis en train de faire). Mais quand j'ai essayer le bouton d'impression, la page est complètement vide. La structure html de la page ressemble à ceci:

<body>    
<div id="fullpage">

    <div class="section">
    some stuff that should not be printed
    </div>
    <div class="section">
    even more stuff that should not be printed
    </div>

    <div class="section" id="results_page">
        <img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">

        <div class="content_wrapper" id="result_text">
            <h1 id="result_h1">some stuff</h1>
            <h2 id="result_h2">more headlines</h2>
            <p id="result_p1">some text</p>
            <button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
            <button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
        </div>
    </div>
</div>
</body>

Et voici le CSS qui est censée cacher tout sauf le div avec l'id "results_page" (bien sûr, les boutons dans cette div est également censé être caché dans la presse écrite).

@media print {
*{
    background-color:transparent;
}
div#fullpage .section, .print_trigger, .unprintable{
    display:none;
}
div#fullpage #results_page{
    display:block;
}
#result_image,
#result_text {
    float: none;
    margin: 50px;
}
}

La fonction javascript est assez simple, en fonction de ce bouton, l'utilisateur clique il ajoute le "non imprimables" classe à l'élément de l'image, puis imprime le document (je ne sais pas si le html, le css et le js sont le coupable ici, c'est pourquoi je inclure tout cela dans la question):

function print_stadtarchiv(print_picture){
if(!print_picture) $('#result_image').addClass = 'unprintable';
window.print();
}

Donc, compte tenu de tout cela, ce qui pourrait être à l'origine de la page vide mon imprimante crache?

InformationsquelleAutor MoritzLost | 2015-03-21
  1. 4

    Pour tous ceux qui ont ce problème(surtout si en utilisant bootstrap), il peut être une question CSS et non PAS une question de javascript.

    Mon dilemme est que nous avons eu un bouton d'impression vers le haut de la page qui appelle la "fenêtre.print()" de la fonction. Et il en est résulté un vide page d'aperçu avant impression. Ce qui est curieux, c'était de travailler complètement bien il y a plusieurs semaines.

    Donc d'abord, comme beaucoup de fils ont mentionné, vérifiez que ce n'est pas une question de javascript en effet. Mon appel à la fenêtre.print() n'a vraiment afficher la fenêtre d'aperçu avant impression(ce qui signifie que nous n'étions pas accidentellement substitution de la fonction d'impression avec une autre variable quelque part.)

    Le problème était avec Bootstrap de conteneurs et de conteneurs de liquides classes n'affiche pas pour les modes d'impression. Apparemment, ces classes sont dit de ne pas s'afficher sur les styles d'impression(probablement à partir de bootstrap feuille de style).

    Tout ce que j'avais à faire était d'ajouter le code CSS suivant règles d'impression:

     .container, .container-fluid {
    width: auto;
    display: block!important;
 }

    et il affiche de nouveau! C'est également fait allusion au travers de bootstrap, documentation ici: http://getbootstrap.com/getting-started/#support-printing

    Donc, en un mot, vérifiez si le CSS est la question, et cessez de blâmer les pauvres Javascript.

    InformationsquelleAutor javaBean007
  2. 1

    Ici, vous allez:

         function print_stadtarchiv(print_picture) {
         if(!print_picture) $('#result_image').addClass('unprintable');
         return window.print();
     }

    Aussi, il semble que vous n'avez pas de DOCTYPE ou des balises html... C'est probablement à cause de toutes sortes de rendu/pas-rendu en fonction des questions.

    <!DOCTYPE html>
<html>
<body>    
<div id="fullpage">

    <div class="section">
    some stuff that should not be printed
    </div>
    <div class="section">
    even more stuff that should not be printed
    </div>

    <div class="section" id="results_page">
        <img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">

        <div class="content_wrapper" id="result_text">
            <h1 id="result_h1">some stuff</h1>
            <h2 id="result_h2">more headlines</h2>
            <p id="result_p1">some text</p>
            <button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
            <button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
        </div>
    </div>
</div>
</body>
</html>
    • Pourquoi est-il nécessaire de la fenêtre de retour.imprimer?
    • Est-il une raison de ne pas? PS. Voir mon edit.
    • Ah, je viens de quitter les environs de balises, mais je ne suis pas tellement mauvais que d'oublier même qu' °v° je voulais dire "pourquoi serait-il fonctionner si elle retourne que si elle ne marche pas, quand il ne marche pas?" °v°
    • Ok je l'ai essayé avec le retour et les imprimés sont encore vides
    • C'est une bonne pratique de retourner quelque chose plutôt que rien. Même si vous retournez vide. Il n'y aucune raison de ne pas revenir aux fondamentaux de ce que la fonction est responsable de l'.
    • Avez-vous essayé sur plusieurs navigateurs comme il fonctionne très bien pour moi.
    • Ok je ne le savais pas. Oui, j'ai essayé Chrome et Firefox, l'impression est imprimé comme prévu dans, ni de qui. Je devrais peut-être mentionner le code html de la page que je suis bâtiment est une grande page construite avec fullpage.js. Cela pourrait-il être la cause de ce problème?

    InformationsquelleAutor verheesj
  3. 0

    À toute personne ayant le même problème: je ne pouvais pas comprendre ce qui était à l'origine, mais j'ai pu le faire à l'aide de la window.frame approche élaborée dans cette réponse.

    InformationsquelleAutor MoritzLost