web-dev-qa-db-fra.com

Javascript Imprimer le contenu d'iframe seulement

C'est mon code

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

Cela fonctionne, mais la page parent est imprimée. Comment puis-je l’imprimer uniquement au format iframe?

javascriptjqueryprinting
57
user1083382

Je ne m'attendrais pas à ce que cela fonctionne

essayez plutôt

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

et utilise

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

Ou bien essayez bon vieux

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

si jQuery ne peut pas le pirater

Démo en direct

110
mplungjan
document.getElementById("printf").contentWindow.print();

politique de même origine s'applique.

16
Salman A

Manière simple (testé sur ie7 +, firefox, Chrome, safari) serait-ce

//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;
}
11
Kiarash

une autre option, qui peut ou non convenir, mais plus propre si elle est:

Si vous souhaitez toujours simplement imprimer l'iframe à partir de la page, vous pouvez utiliser une feuille de style "@media print {}" distincte qui masque tout ce qui se trouve à côté de l'iframe. Ensuite, vous pouvez simplement imprimer la page normalement.

9
Evert

Vous pouvez utiliser cette commande:

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

Cette commande est fondamentalement la même que window.print (), mais comme la fenêtre que nous souhaitons imprimer se trouve dans l'iframe, nous devons d'abord obtenir une instance de cette fenêtre sous la forme d'un objet javascript.

Ainsi, en référence à cette iframe, nous obtenons d'abord l'iframe en utilisant son id, puis contentWindow renvoie un objet window (DOM). Nous pouvons donc utiliser directement la fonction window.print () sur cet objet.

7
Perx

J'ai eu des problèmes avec toutes les solutions ci-dessus dans IE8, j'ai trouvé une solution de contournement décente qui est testée dans IE 8 + 9, Chrome, Safari et Firefox. Pour ma situation, je devais imprimer un rapport qui a été généré dynamiquement:

// 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>';

Notez la méthode JavaScript printPage () avant la balise body close.

Créez ensuite l'iframe et ajoutez-le au corps parent afin que son contenuWindow soit disponible:

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

Ensuite, définissez le contenu:

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

Nous définissons ici la variable de contenu dynamique sur l'objet window de l'iframe, puis nous l'appelons via javascript: scheme.

Enfin pour imprimer; concentrez l'iframe et appelez la fonction javascript printPage () dans le contenu de l'iframe:

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

SetTimeout n'est pas nécessairement nécessaire. Toutefois, si vous chargez de grandes quantités de contenu, j'ai trouvé Chrome échouait occasionnellement sans impression. Cette étape est donc recommandée. Vous pouvez également encapsuler 'newIframe.contentWindow .printPage (); 'dans un essai catch et placez la version encapsulée setTimeout dans le bloc catch.

J'espère que cela aidera quelqu'un, car j'ai passé beaucoup de temps à trouver une solution qui fonctionnait bien avec plusieurs navigateurs. Merci à SpareCycles .

EDIT:

Au lieu d'utiliser setTimeout pour appeler la fonction printPage, utilisez ce qui suit:

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

À ce stade, la balise de script à l'intérieur de l'iframe n'est pas nécessaire. Cela fonctionne pour moi (testé dans Chrome, Firefox, IE11 et 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>

Merci à toutes les réponses, sauvez ma journée.

3
Edakos

Utilisez ce code pour IE9 et les versions supérieures:

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

Pour IE8:

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

J'étais coincé en essayant d'implémenter ceci dans TypeScript, tout ce qui précède ne fonctionnerait pas. Je devais d'abord convertir l'élément pour que TypeScript puisse accéder à contentWindow.

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

Si vous définissez le contenu d'IFrame à l'aide de javascript document.write(), vous devez fermer le document par newWin.document.close();, sinon le code suivant ne fonctionnera pas et print imprimera le contenu de la page entière au lieu de seulement le contenu IFrame.

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