Распечатать iframe в IE

Question

У меня есть кнопка, которая загружает отчет для печати в «невидимый» iframe внутри div и печатает этот iframe;пользователь нажимает кнопку, чтобы распечатать отчет (содержащийся на другой странице), не меняя страницы или визуальные сбои, кроме диалога печати.Он работает в Chrome и Firefox, но не в IE.В IE родительская страница печатается полностью, и крошечный испорченный iframe вставляется внизу страницы (где я загружаю iframe).

Вот пустой div без содержимого, он там такУ меня есть место с тегом ID для стилизации и вставки содержимого с помощью Javascript:

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

Вот функция javascript, при нажатии этой кнопки эта функция запускается и вставляет страницу печати в iframe внутри printerDiv после загрузки этой страницы.он печатает:

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

Вот CSS, скрывающий div.Я использую абсолютное позиционирование, чтобы сдвинуть его с видимой области экрана.Раньше я использовал display: none, но Firefox не смог напечатать iframes с таким стилем:

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

Когда я печатаю в IE, он печатает всю страницу, а затем внизу, где #printerDivЯ получаю этот маленький iframe:

Итак, контент загружается, но он печатает не только iframe, и он также не скрывает iframe должным образом.Любой другой контент, который я вставляю в #printerDiv, скрыт должным образом, только iframe отображается так.

Я пробовал все решения в этот вопрос в моей функции Javascript: использование self.print, используя document.parentWindow.print, изменение стилей для PrinterDiv на 0px высота / ширина также не работает.

Я рад приветствовать решения, которые не используют iframes (кажется, у IE есть серьезные проблемы с ними), но мне нужна эта возможность загружать контент, не видимый на экране, и печатать его напрямую с помощью кнопки.

Answer 1

В моем случае решение было , а не скрыть фрейм, который я хотел напечатать.Если я скрою это (используя display: none; видимость: hidden и т. Д.), Родительская страница будет всегда печататься.

Вместо того, чтобы фактически скрывать рамку, я просто сделал ее 10x10 и без полей.Теперь это работает (с трюком с задержкой).

Пример кода:

    <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>

Кнопка для печати:

<a href="javascript:printFrame('printframe','contentToPrint')">Print frame</a>

Answer 2

У меня была такая же проблема с IE11.Казалось, что IE игнорирует вызов .focus () и вместо этого печатает родительскую страницу, а также iframe.Мое решение заключалось в том, чтобы добавить тег стиля, который скрывал все, кроме iframe, перед печатью, а затем удалить стиль после вызова печати.Мой код здесь http://ironlasso.com/print-only-lightbox-or-modal-window-content/

Answer 3

Недавно у меня возникла та же проблема с IE10, я добавил таймаут и получил желаемый результат, вместо родительской страницы распечатал iFrame:

<script type="text/javascript">
function selfPrint(){
    self.focus();
    self.print();
}
setTimeout('selfPrint()',2000);
</script>

Answer 4

`<script>

function framePrint(whichFrame) {

parent[whichFrame].focus();

parent[whichFrame].print();

}

</script>`

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

Измените FRAMENAME на имя кадра, который вы хотите напечатать.

Answer 5

вы можете попробовать что-то вроде этого:

используйте что-то вроде .load () в jQuery, чтобы поместить отчет в #printerDiv и дифференцировать его с помощью CSS

на вашем CSS у вас есть

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

и кнопка печати javascript

$('#printerDiv').empty().load(url, function(){
        window.print();
    }); //or whatever library/pure js you like