Печать Iframe в IE 11 печатает только первую страницу

У меня есть следующий код для печати содержимого всплывающего окна:

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();
}

где _urlElement является iframe, а его содержимое doc имеет overflow: auto. Когда я печатаю в PDF в IE11, я вижу только первую страницу, и содержимое не обрезается чисто, и никакие полосы прокрутки не видны в распечатанном PDF файле. Если я попробую Print Preview, даже внутри iframe, я вижу всю страницу с контуром всплывающего окна.

Страница, которую я пытаюсь напечатать с Iframe, имеет главную страницу с content div с overflow: auto. Когда я печатаю подобное, Chrome и IE, я вижу полосу прокрутки на распечатке, а распечатка - только одна страница, поэтому в моей таблице стилей страницы я переопределяю это правило переполнения медиа-запросом для печати, на overflow: visible. Затем, когда я печатаю на Chrome, полоса прокрутки исчезла, а распечатка - две страницы. В IE полоса прокрутки также исчезла, но распечатка бесцеремонно обрезана в конце напечатанной страницы 1.

Когда я изменяю свой код печати для создания нового IFrame и вставляю его в документ для печати, скопируйте таблицы стилей и тело в новый iframe и распечатайте новый iframe, а затем даже в IE полный документ печатается. То есть новый iframe не содержится ни в каких элементах главной страницы, поэтому есть ли какой-либо другой стиль на главной странице, которую я могу найти, что может вызвать это, кроме overflow?

Кстати, я, похоже, испытываю такое поведение только при печати в PDF, используя собственный "принтер PDF" Windows.

Ответ 1

Скорее всего, причина: абсолютное позиционирование

Основываясь на описании проблемы и комментариях к OP, я подозреваю, что элемент #content и/или один или несколько его элементов-предков (возможно, включая body или html) имеет свойство/значение CSS position: absolute;. Это приводит к тому, что Internet Explorer отключает все после первой страницы, в то время как другие браузеры печатают все.

Решение: Самое простое решение - удалить абсолютное позиционирование, по крайней мере, для печатных носителей. Если это не вариант, то альтернативой будет настройка свойства CSS height абсолютно позиционированного элемента (ов). Не видя разметки и CSS, я не могу сказать, какая высота должна быть задана для какого-либо элемента (элементов), но, скорее всего, это будет либо 100%, либо auto, либо некоторая комбинация из двух.

Другая возможность: iframe теряют фокус

Если фокус iframe каким-то образом теряется перед тем, как срабатывает функция print(), это может привести к тому, что поведение браузера будет описано в OP. Большинство браузеров будут печатать содержимое iframe, если вы вызываете функцию print() как метод iframe contentWindow. IE, с другой стороны, всегда будет печатать любое окно в настоящее время в фокусе *.

Решение: Вместо того, чтобы функция печати печатала iframe напрямую, вставьте временную кнопку печати и запускайте ее с помощью виртуального щелчка, например:

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);
}

Это фактически не устраняет необходимость установки фокуса, но я решил, что стоит попробовать, так как OP указал в своих комментариях, что печать срабатывает при срабатывании в пределах iframe.

Альтернативное решение:. Это работает, временно заменяя родительский документ документом iframe. Это устраняет необходимость сосредоточиться на iframe, но это гораздо более экстремальное решение, и я ожидаю столкнуться с некоторыми проблемами с очень большими и сложными страницами.

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);
}

* При печати из пользовательского интерфейса IE всегда выводит окно верхнего уровня по умолчанию. Чтобы распечатать контент iframe, вы должны выбрать его (например, щелкнув по кадру и нажав CTRL + A), а затем выберите "Выбранный" в диалоговом окне печати или "Как выбрано на экране" в предварительном просмотре печати.

Ответ 2

попробуйте следующее:

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

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