Drucken iframe im IE

Habe ich eine Schaltfläche, lädt den Bericht für den Druck in einen "unsichtbaren" iframe innerhalb eines div und Drucke, iframe; der Benutzer drückt eine Taste, um den Bericht zu drucken (die auf einer anderen Seite), ohne Wechsel der Seiten oder visuelle Störungen abgesehen von den drucken-dialog. Es funktioniert in Chrome und Firefox, aber nicht IE. Im IE die übergeordnete Seite vollständig ausgedruckt, und ein kleines Durcheinander iframe eingefügt wird, an der Unterseite der Seite (wo ich das laden des iframe).

Hier ist das leere div-Element ohne Inhalt, es ist da, also ich habe eine ID tagged Ort, um Stil und stick-Inhalt mit Javascript:

<div id="printerDiv"></div>

Hier ist die javascript-Funktion onClick der my-Taste mit dieser Funktion ausgelöst und fügt meine print-Seite in ein iframe innerhalb printerDiv, nach dem laden dieser Seite, die es druckt:

function printPage(url) {
    var div = document.getElementById("printerDiv");
    div.innerHTML = '<iframe src="'+url+'" onload=this.contentWindow.print();>
        </iframe>';
 }

Hier ist die CSS ausblenden des div. Ich bin mit absoluter Positionierung zu verschieben aus dem sichtbaren Bildschirm-Bereich. Ich verwendet, um zu verwenden display:none, aber Firefox war nicht in der Lage zu drucken iframes gestylt so:

#printerDiv{
    position:absolute;
    left:-9999px;
}

Beim drucken in IE druckt er die ganze Seite, und dann unten, wo #printerDiv ist, bekomme ich dieses kleine iframe:
Drucken iframe im IE

Damit der Inhalt geladen wird, aber es ist nicht gedruckt, nur der iframe, und es ist nicht versteckt, der iframe richtig. Alle anderen Inhalte, die ich einfügen in #printerDiv versteckt ist richtig, nur der iframe zeigt wie.

Ich habe versucht, alle Lösungen in diese Frage in meine Javascript Funktion: mit self.print, mit document.parentWindow.print ändern der styles auf die printerDiv auf 0px Höhe/Breite funktioniert auch nicht.

Ich bin willkommen, um Lösungen, die nicht mit iframes (IE scheint massive Probleme mit Ihnen), aber ich brauche diese Möglichkeit zum laden von Inhalten, die nicht auf dem Bildschirm sichtbar und drucken Sie direkt über eine Taste.

  • haben Sie versucht, mit @media-Regeln von css?
  • Ich bin, und ich verwendet, um zu verwenden display:none in meinem Bildschirm und CSS - display:block in meinem Druck-CSS, es hat nicht funktioniert in Firefox. Ich weiß nicht, ob es funktionierte im IE entweder.
  • Sie könnten versuchen, die Auswahl der Rahmen aus der window.frames array anstatt this, dass vielleicht auf window im ie
  • habe gerade, Chrome und FF drucken Sie den Bericht nur Rahmen, wie Sie sollte, DH jetzt druckt das übergeordnete Fenster und nur das übergeordnete Fenster, es gar nicht zeigen, der iframe mit dem Bericht.
  • welche IE-version sind Sie auf die Prüfung vor?
  • IE 8, muss die Arbeit im IE7 auch leider.

InformationsquelleAutor Ben Brocka | 2011-10-07
  1. -1

    können Sie versuchen, so etwas wie dieses:

    etwas wie jQuery .load() um den Bericht in der #printerDiv und differenziert es mit CSS

    auf Ihre CSS-Sie haben

    #printerDiv{display:none;}
@media print{
    body *{display:none;}
    #printerDiv{display:block;height:100%;width:100%}
}

    und die Schaltfläche "drucken" javascript

    $('#printerDiv').empty().load(url, function(){
        window.print();
    }); //or whatever library/pure js you like
    • und Drucke ich die ganze Seite mit allem, was sonst verborgen ist. und nicht mit iframes
    • Sie laden konnte nur auf dieser Seite
    • Sie können fügen Sie eine Klasse, um den Körper in diese js-Funktion vor dem drucken und löschen nach, und dann in der @media print css body.specialClass * {...
    InformationsquelleAutor Einacio
  2. 8

    In meinem Fall, war die Lösung nicht ausblenden des iFrames wollte ich drucken. Wenn ich es ausblenden per display:none; visibility:hidden usw. ) der übergeordneten Seite würde immer drucken.

    Statt tatsächlich versteckt den Rahmen, aber ich machte es 10x10 und ohne Rand. Nun das funktioniert (mit der delay-trick).

    Beispiel-code:

        <script type="text/javascript">
    function printFrame(frameId, targetContent)
    {
        var doc = $('#'+frameId).get(0).contentWindow.document;
        var $body = $('body',doc);

        $body.html($('#'+targetContent).html());

        setTimeout(function(){
            $('#'+frameId).get(0).contentWindow.focus();
            $('#'+frameId).get(0).contentWindow.print();            
        }, 1000);        
    }
</script>

    HTML:

    <div id="contentToPrint">
I just want to print this stuff
</div>
<iframe src="about:blank" id="printframe" style="border:0" width="10" height="10"></iframe>

    Schaltfläche drucken:

    <a href="javascript:printFrame('printframe','contentToPrint')">Print frame</a>
    • dies scheint für mich arbeiten für den ie8, aber nicht für 9
    • Dies scheint zu funktionieren im IE10. Für uns, die wir dynamisch einfügen des IFRAME-also brauchen wir auch eine Verzögerung auf der "Entsorgung" (entfernen) in diesem Rahmen zu geben, Zeit für den dialog "drucken", um pop-up. Auch für die "Sichtbarkeit" Problem, dass wir absolut position des IFRAME vom Bildschirm. {position: "absolute", top: 0, left: -2000, 'z-index': 20000, Breite: 1024 Höhe: 500, backgroundColor: "white"} Dies ermöglicht es den Inhalt für das format richtig (als wenn es gerendert wurde in der Nähe-Vollbild, aber macht es so IE10 wird es zu drucken.
    • Die setTimeout machte es Arbeit für mich
    InformationsquelleAutor HaukurHaf
  3. 1
    `<script>

function framePrint(whichFrame) {

parent[whichFrame].focus();

parent[whichFrame].print();

}

</script>`

    <a href="javascript:framePrint('FRAMENAME');">Print</a>

    Ändern FRAMENAME auf den Namen der frame, den Sie drucken möchten.

    • Der iframe nicht vorhanden ist, bevor Sie den button klicken, aber ich habe versucht, diesen code (mit Hilfe der frames-array) zu focus() und print() den Rahmen im IE. Wieder, es funktioniert in Chrome und Firefox aber nicht im IE...
    InformationsquelleAutor Ben
  4. 1

    Ich hatte das gleiche Problem vor kurzem mit IE10, fügte ein timeout und bekam das Ergebnis, das ich wollte, das iFrame ausgedruckt, anstatt die übergeordnete Seite:

    <script type="text/javascript">
function selfPrint(){
    self.focus();
    self.print();
}
setTimeout('selfPrint()',2000);
</script>
    • der timeout noch nicht so lang werden.
    • Dies löste mein problem auch, aber kann jemand erklären, warum es funktioniert?
    InformationsquelleAutor James Moberg
  5. 1

    Ich hatte das gleiche problem mit IE11. Es schien wie IE ignorierte die .focus() aufrufen, und anstatt den Druck der übergeordneten Seite als auch für die iframe. Meine Lösung war, zu Spritzen, ein style-tag, verbarg alles außer der iframe rechts vor dem drucken, dann entfernen Sie den Stil nach dem Aufruf von print. Mein code ist hier http://ironlasso.com/print-only-lightbox-or-modal-window-content/

    InformationsquelleAutor Lorenzo Gangi
Schreibe einen Kommentar