Javascript Распечатать только содержание iframe - программирование
Подтвердить что ты не робот

Javascript Распечатать только содержание iframe

Это мой код

<script>
var body = "dddddd"    
var script = "<script>window.print();</scr'+'ipt>";

var newWin = $("#printf")[0].contentWindow.document; 
newWin.open();
newWin.close();

$("body",newWin).append(body+script);

</script>
<iframe id="printf"></iframe>

Это работает, но он печатает родительскую страницу, как мне ее распечатать только в iframe?

4b9b3361

Ответ 1

Я бы не ожидал, что это сработает

попробуйте вместо этого

window.frames["printf"].focus();
window.frames["printf"].print();

и используйте

<iframe id="printf" name="printf"></iframe>

Альтернативно попробуйте старый добрый

var newWin = window.frames["printf"];
newWin.document.write('<body onload="window.print()">dddd</body>');
newWin.document.close();

если jQuery не может взломать его

Live Demo

Ответ 3

Простой способ (проверенный на ie7 +, firefox, Chrome, safari) - это

//id is the  id of the iframe
function printFrame(id) {
            var frm = document.getElementById(id).contentWindow;
            frm.focus();// focus on contentWindow is needed on some ie versions
            frm.print();
            return false;
}

Ответ 4

альтернативный вариант, который может быть или не быть подходящим, но более чистым, если он:

Если вы всегда хотите просто распечатать iframe со страницы, вы можете иметь отдельную таблицу стилей @media print {}, которая скрывает все, кроме iframe. Затем вы можете просто распечатать страницу в обычном режиме.

Ответ 5

Вы можете использовать эту команду:

document.getElementById('iframeid').contentWindow.print();

Эта команда в основном такая же, как window.print(), но поскольку окно, которое мы хотели бы распечатать, находится в iframe, сначала нужно получить экземпляр этого окна в качестве объекта javascript.

Итак, ссылаясь на этот iframe, мы сначала получаем iframe, используя его id, а затем он contentWindow возвращает объект окна (DOM). Таким образом, мы можем напрямую использовать функцию window.print() для этого объекта.

Ответ 6

У меня были проблемы со всеми вышеперечисленными решениями в IE8, они нашли достойный обходной путь, который протестирован в IE 8 + 9, Chrome, Safari и Firefox. Для моей ситуации мне нужно было распечатать отчет, который был сгенерирован динамически:

// create content of iframe
var content = '<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">'+
'<head><link href="/css/print.css" media="all" rel="stylesheet" type="text/css"></head>'+
'<body>(rest of body content)'+
'<script type="text/javascript">function printPage() { window.focus(); window.print();return; }</script>'+
'</body></html>';

Обратите внимание на метод javascript printPage() перед тегом закрытия тела.

Затем создайте iframe и добавьте его в родительское тело, чтобы его содержимое было доступно:

var newIframe = document.createElement('iframe');
newIframe.width = '0';
newIframe.height = '0';
newIframe.src = 'about:blank';
document.body.appendChild(newIframe);

Затем установите содержимое:

newIframe.contentWindow.contents = content;
newIframe.src = 'javascript:window["contents"]';

Здесь мы устанавливаем динамическую переменную содержимого в объект окна iframe, а затем вызываем ее через схему javascript:.

Наконец, для печати; сфокусируйте iframe и вызовите функцию javascript printPage() в содержимом iframe:

newIframe.focus();
setTimeout(function() {
  newIframe.contentWindow.printPage();
}, 200);
return;

SetTimeout необязательно необходимо, однако, если вы загружаете большое количество контента, я обнаружил, что Chrome иногда не печатался без него, поэтому этот шаг рекомендуется. Альтернативой является wrap 'newIframe.contentWindow.printPage();' в try catch и поместите завершенную версию setTimeout в блок catch.

Надеюсь, это поможет кому-то, поскольку я потратил много времени на поиск решения, которое хорошо работало в нескольких браузерах. Благодаря SpareCycles.

EDIT:

Вместо использования функции setTimeout для вызова функции printPage используйте следующее:

newIframe.onload = function() {
    newIframe.contentWindow.printPage();
}

Ответ 7

В это время нет необходимости в теге script внутри iframe. Это работает для меня (проверено в Chrome, Firefox, IE11 и node -webkit 0.12):

<script>
window.onload = function() {
    var body = 'dddddd';
    var newWin = document.getElementById('printf').contentWindow;
    newWin.document.write(body);
    newWin.document.close(); //important!
    newWin.focus(); //IE fix
    newWin.print();
}
</script>

<iframe id="printf"></iframe>

Спасибо всем, спасите мой день.

Ответ 8

Если вы устанавливаете содержимое IFrame с помощью javascript document.write(), тогда вы должны закрыть документ newWin.document.close();, иначе следующий код не будет работать, и печать напечатает содержимое всей страницы, а не только содержимое IFrame.

var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();

Ответ 9

Используйте этот код для IE9 и выше:

window.frames["printf"].focus();
window.frames["printf"].print();

Для IE8:

window.frames[0].focus();
window.frames[0].print();

Ответ 10

Я застрял, пытаясь реализовать это в машинописи, все вышеперечисленное не будет работать. Я должен был сначала привести элемент, чтобы машинопись имела доступ к contentWindow.

let iframe = document.getElementById('frameId') as HTMLIFrameElement;
iframe.contentWindow.print();

Ответ 11

Мне интересно, какова ваша цель делать печать iframe.

Я встретил аналогичную проблему минуту назад: используйте предварительный просмотр хрома для создания PDF файла iframe.

Наконец, я решил свою проблему с трюком:

$('#print').click(function() {
    $('#noniframe').hide(); // hide other elements
    window.print();         // now, only the iframe left
    $('#noniframe').show(); // show other elements again.
});