Javascript Распечатать только содержание iframe - PullRequest
Новая
       3

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

57 голосов
/ 08 марта 2012

Это мой код 

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

Ответы [ 11 ]

110 голосов
/ 08 марта 2012

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

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

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

16 голосов
/ 08 марта 2012 
document.getElementById("printf").contentWindow.print();

Применяется та же политика происхождения *

11 голосов
/ 15 января 2013

Простой способ (протестирован на 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;
}
9 голосов
/ 08 марта 2012

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

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

7 голосов
/ 20 февраля 2015

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

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

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

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

4 голосов
/ 03 октября 2013

У меня были проблемы со всеми вышеуказанными решениями в 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 и добавьте его в родительское тело, чтобы его contentWindow было доступно: 

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 иногда не может печатать без него, поэтому рекомендуется этот шаг. Альтернативой является завершение 'newIframe.contentWindow.printPage ();' при попытке поймать и поместить упакованную версию setTimeout в блок catch.

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

EDIT:

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

newIframe.onload = function() {
    newIframe.contentWindow.printPage();
}
3 голосов
/ 24 апреля 2015

В настоящее время нет необходимости использовать тег 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>

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

0 голосов
/ 09 июля 2019

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

let iframe = document.getElementById('frameId') as HTMLIFrameElement;
iframe.contentWindow.print();
0 голосов
/ 02 июля 2015

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

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

Для IE8: 

window.frames[0].focus();
window.frames[0].print();
0 голосов
/ 29 апреля 2015

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

Я недавно столкнулся с подобной проблемой: используйте предварительный просмотр печати в chrome, чтобы создать PDF-файл iframe.

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

$('#print').click(function() {
    $('#noniframe').hide(); // hide other elements
    window.print();         // now, only the iframe left
    $('#noniframe').show(); // show other elements again.
});
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...