wake-up-neo.com

Drucken von Iframe in IE 11 druckt nur die erste Seite

Ich habe den folgenden Code, um den Inhalt eines Popup-Fensters zu drucken:

var frame = this._urlElement;
if (frame) {
    var content = frame.contentWindow.document.getElementById("content");
    if (content) {
        MarvalSoftware.UI.Dom.setStyles(content, { 'overflow': 'visible' });
    }
    frame.contentWindow.focus();
    frame.contentWindow.print();
}

dabei ist _urlElement ein iframe und sein Inhaltsdokument hat overflow: auto. Wenn ich in IE11 an PDF drucke, wird nur die erste Seite angezeigt, und der Inhalt wird nicht sauber abgeschnitten, und auf der gedruckten PDF-Datei sind keine Bildlaufleisten sichtbar. Wenn ich die Druckvorschau versuche, sehe ich sogar die gesamte Seite mit dem Umriss des Popup-Fensters.

Die Seite, die ich vom Iframe aus drucken möchte, hat eine Masterseite mit einer content div mit overflow: auto. Wenn ich auf diese Weise in Chrome und IE drucke, sehe ich auf dem Ausdruck eine Bildlaufleiste. Der Ausdruck ist nur eine Seite. Daher überschreibe ich diese Überlaufregel im Stylesheet meiner Seite mit einer Medienabfrage zum Ausdrucken in overflow: visible. . Wenn ich dann in Chrome drucke, ist die Bildlaufleiste weg und der Ausdruck besteht aus zwei Seiten. Im IE ist die Bildlaufleiste ebenfalls weg, der Ausdruck wird jedoch am Ende der gedruckten Seite 1 kurzerhand abgeschnitten.

Wenn ich meinen Druckcode zum Erstellen eines neuen IFrames ändere und ihn in das zu druckende Dokument einfüge, kopiere ich die Stylesheets und den Body in den neuen iframe und drucke den neuen iframe. Dann wird auch im IE das vollständige Dokument gedruckt. Das heißt, der neue iframe ist in keinem Element der Masterseite enthalten. Gibt es in der Masterseite ein anderes Styling, nach dem ich suchen kann, das anders als overflow dazu führen könnte?

Übrigens, dieses Verhalten tritt anscheinend nur auf, wenn ich mit dem eigenen PDF-Drucker von Windows nach PDF drucke.

15
ProfK

Wahrscheinlichste Ursache: absolute Positionierung

Aufgrund der Problembeschreibung und der Kommentare von OP vermute ich, dass das #content-Element und/oder eines oder mehrere seiner Vorfahren-Elemente (möglicherweise einschließlich body oder html) die CSS-Eigenschaft/den position: absolute;-Wert hat. Dies führt dazu, dass Internet Explorer nach der ersten Seite alles abschneidet, während andere Browser alles drucken.

Lösung: Die einfachste Lösung wäre, zumindest für Druckmedien, die absolute Positionierung zu entfernen. Wenn dies keine Option ist, besteht die Alternative darin, die CSS-Eigenschaft height der absolut positionierten Elemente anzupassen. Ohne das Markup und das CSS zu sehen, kann ich nicht sagen, welche Höhe für welche Elemente festgelegt werden muss, aber es besteht die Möglichkeit, dass es entweder 100% oder auto ist oder eine Kombination aus beiden.


Andere Möglichkeit: iframe verliert den Fokus

Wenn der Fokus des iframe vor dem Auslösen der Funktion print() verloren geht, kann dies zu einem browserspezifischen Verhalten führen, das im OP beschrieben wird. Die meisten Browser drucken den Inhalt eines iframe, wenn Sie die Funktion print() als Methode der contentWindow des iframe aufrufen. IE hingegen druckt immer das Fenster, das gerade im Fokus ist *.

Lösung: Anstatt den Iframe direkt mit der Druckfunktion drucken zu lassen, sollte er eine temporäre Drucktaste einbetten und mit einem virtuellen Klick auslösen, z.

var frame = this._urlElement;
if (frame) {
    var content = frame.contentWindow.document.getElementById("content");
    if (content) {
        MarvalSoftware.UI.Dom.setStyles(content, { 'overflow': 'visible' });
    }
    frame.contentDocument.body.insertAdjacentHTML(
      'beforeend',
      '<div id="print" onclick="window.focus();window.print();"></div>'
    );
    var printButton = frame.contentDocument.getElementById('print');
    printButton.click();
    printButton.parentNode.removeChild(printButton);
}

Dies beseitigt zwar nicht die Notwendigkeit, den Fokus einzustellen, aber ich dachte, es wäre einen Versuch wert, da das OP in seinen Kommentaren anzeigte, dass der Druck funktioniert, wenn er aus dem Iframe ausgelöst wird.

Alternative Lösung: Dies funktioniert, indem das übergeordnete Dokument vorübergehend durch das Dokument des Iframes ersetzt wird. Es tut eliminiert die Notwendigkeit, sich auf den iframe zu konzentrieren, aber es ist eine viel extremere Lösung, und ich würde erwarten, dass einige Probleme mit sehr großen und komplexen Seiten auftreten.

var frame = this._urlElement;
if (frame) {
    var content = frame.contentWindow.document.getElementById("content");
    if (content) {
        MarvalSoftware.UI.Dom.setStyles(content, { 'overflow': 'visible' });
    }
    var doc = document.documentElement;
    document.replaceChild(frame.contentDocument.documentElement, doc);
    window.setTimeout(function() {
        window.print();
        document.replaceChild(doc, document.documentElement);
    }, 100);
}

* Beim Drucken von der Benutzeroberfläche aus wird mit IE standardmäßig immer das Fenster der obersten Ebene gedruckt. Um den Inhalt eines Iframes zu drucken, müssen Sie ihn auswählen (z. B. indem Sie in den Rahmen klicken und STRG + A drücken) und dann im Druckdialogfeld "Ausgewählt" oder in der Druckvorschau "Wie auf dem Bildschirm ausgewählt" wählen.

14
DoctorDestructo

versuche dies:

var content = document.getElementById('content');

try {
    content.contentWindow.document.execCommand('print', false, null);
} catch (e) {
    content.contentWindow.print();
}          
0
Abd