Drucken Sie den Inhalt des versteckten div

Auf meiner Seite habe ich ein HTML-DIV-Element, das auf dem Bildschirm angezeigt und die anderen ausgeblendet. Ich trage diese versteckten DIV-Inhalt von einem Bericht, den ich brauche, um zu drucken, ich muss auf Sie klicken, so dass der Benutzer Sie nicht sehen können, nur im Druck. Weitere, den Inhalt des DIV, die auf dem Bildschirm angezeigt wird, ich will nicht kommen aus im Druck. 😉

've Recherchiert genug hier im stackoverflow einige Themen, die reden, aber es redet das Gegenteil, dh nicht drucken Sie den Inhalt des versteckten DIV.

InformationsquelleAutor Carlos Andrade | 2014-09-06
  1. 2

    Können Sie einfach Umschalten der Sichtbarkeit beim senden, zu drucken. 

    Example HTML:

<div id="printdiv">
    <div id="hidden_div">
        MORE HTML
    </div>
</div>

    CSS

    #hidden_div{display: none;}

    JQuery

    function myPrint() {
        var myPrintContent = document.getElementById('printdiv');
        var myPrintWindow = window.open(windowUrl, windowName, 'left=300,top=100,width=400,height=400');
        myPrintWindow.document.write(myPrintContent.innerHTML);
        myPrintWindow.document.getElementById('hidden_div').style.display='block'
        myPrintWindow.document.close();
        myPrintWindow.focus();
        myPrintWindow.print();
        myPrintWindow.close();    
        return false;
    }

    Verwenden Sie nun eine Schaltfläche oder einen link, um das Feuer myPrint() und Sie können drucken, die versteckten div-allein und Ihre anderen div wird nicht gedruckt

    • In diesem Fall, wie würde der css?
    • es ist da: Sie haben eine #hidden_div:display:none", die geändert wird, zu blockieren, wenn Sie gedruckt werden
    • Jetzt ist es perfekt! Danke.
    InformationsquelleAutor Devin
  2. 6

    Können Sie eine CSS-media-query zu tun, dass ohne Javascript:

    <html>
    <head>
        <title></title>
        <style type="text/css">
            .a {color: green;}
            .b {color: blue;}
            .printMe {display: none;}
            @media print {
                div {display: none;}
                .printMe {display: block;}
            }
        </style>
    </head>
    <body>
        <div class="a">Some text.</div>
        <div class="printMe">Only to be shown in print.</div>
        <div class="b">More characters.</div>
    </body>
</html>

    (Ich habe formatiert, CSS-wie das nur der Kürze halber.)

    Wenn Sie die Last, die in einem browser, sollten Sie sehen, es ist nur der farbige text. Wenn Sie eine Druckvorschau sehen Sie nur den schwarzen text.

    Edit: können Sie immer noch verwenden, was auch immer andere Methode, die Sie wünschen zu tun, die Druck, sei es durch einfache Javascript-oder die Benutzer über den browser drucken-Methode.

    • Sehr gut und einfach dieser Weg, noch besser: Sie brauchen nicht zu verwenden, JS. Danke!!!
    InformationsquelleAutor Andrew Morton
  3. 0

    Ich würde empfehlen, du schaust in den @print stylesheet-option.

    Finden Sie in diesem Artikel auch hier:

    • Ich denke, du meintest @media print, und einen besseren Artikel zu link gewesen wäre, enthalten in dem Artikel, den Sie verlinkt zu: Druck-stylesheet - the definitive guide. Wie es ist, müssen Sie eine Antwort, die ist voll genug, um auf eigenen Füßen zu stehen (so weit möglich), ohne sich auf externe Ressourcen, die verschwinden könnte in der Zukunft.
    InformationsquelleAutor Graeme Wilkinson
Schreibe einen Kommentar