web-dev-qa-db-fra.com

Impression d'Iframe dans IE 11 imprime seulement la première page

J'ai le code suivant pour imprimer le contenu d'une fenêtre popup:

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

où _urlElement est un iframe et que son document de contenu a overflow: auto. Lorsque j'imprime sur PDF dans IE11, je ne vois que la première page, le contenu n'est pas coupé correctement et aucune barre de défilement n'est visible sur le PDF imprimé. Si j'essaie d'aperçu avant impression, même à l'intérieur de l'iframe, je vois toute la page avec le contour de la fenêtre contextuelle.

La page que j'essaie d'imprimer à partir de l'Iframe a une page maître, avec une variable content avec overflow: auto. Lorsque j'imprime de la sorte, Chrome et IE, une barre de défilement apparaît sur l'impression et l'impression ne comporte qu'une page. Par conséquent, dans la feuille de style de ma page, je remplace cette règle de débordement par une requête de support d'impression, à overflow: visible . Ensuite, lorsque j'imprime sur Chrome, la barre de défilement a disparu et l'impression est deux pages. Dans IE, la barre de défilement a également disparu, mais l'impression est coupée sans cérémonie à la fin de la page imprimée 1.

Lorsque je modifie mon code d'impression pour créer un nouveau IFrame et que je l'insère dans le document à imprimer, copiez les feuilles de style et le corps dans la nouvelle iframe, puis imprimez la nouvelle iframe. Même dans IE, le document complet est imprimé. Autrement dit, la nouvelle iframe ne figure dans aucun élément de la page maître. Existe-t-il un autre style dans la page maître que je pourrais rechercher qui pourrait en être la cause, autre que overflow?

BTW, il semble que je ne rencontre ce problème que lorsque j'imprime au format PDF, en utilisant la propre "imprimante PDF" de Windows.

javascripthtmlcssiframeinternet-explorer-11
15
ProfK

Cause probable: positionnement absolu

Sur la base de la description du problème et des commentaires de l'OP, je soupçonne que l'élément #content et/ou un ou plusieurs de ses éléments ancêtres (incluant éventuellement body ou html) possède la propriété/valeur CSS position: absolute;. Cela a tendance à amener Internet Explorer à tout couper après la première page, tandis que les autres navigateurs impriment tout.

Solution: La solution la plus simple serait de supprimer le positionnement absolu, du moins pour les supports d'impression. Si ce n'est pas une option, alors l'alternative serait d'ajuster la propriété CSS height du ou des éléments à positionnement absolu. Sans voir le balisage et les CSS, je ne peux pas dire quelle hauteur doit être définie sur quel (s) élément (s), mais il est probable que ce sera soit 100% ou auto, ou une combinaison des deux.

Autre possibilité: iframe perdre le focus

Si le focus de l'iframe est perdu d'une manière ou d'une autre avant le déclenchement de la fonction print(), cela peut entraîner le type de comportement spécifique au navigateur décrit dans le PO. La plupart des navigateurs imprimeront le contenu d'un iframe si vous appelez la fonction print() en tant que méthode de la variable contentWindow de l'iframe. En revanche, IE imprimera toujours la fenêtre actuellement active *.

Solution: Au lieu de laisser la fonction d'impression imprimer directement l'iframe, faites-la incorporer un bouton d'impression temporaire et déclenchez-la en un clic virtuel, comme suit:

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

Cela n'élimine pas la nécessité de définir le focus, mais je me suis dit que cela valait peut-être la peine d'essayer, car le PO a indiqué dans ses commentaires que l'impression fonctionne lorsqu'elle est déclenchée depuis l'iframe.

Solution alternative: Celle-ci fonctionne en remplaçant temporairement le document parent par le document de l'iframe. Il fait élimine le besoin de se concentrer sur l'iframe, mais c'est une solution beaucoup plus extrême, et je m'attendrais à rencontrer quelques problèmes avec des pages très volumineuses et complexes.

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

* Lors de l'impression à partir de l'interface utilisateur, IE imprime toujours la fenêtre de niveau supérieur par défaut. Pour imprimer le contenu d'un iframe, vous devez le sélectionner (par exemple, en cliquant dans le cadre et en appuyant sur CTRL + A), puis choisissez "Sélectionné" dans la boîte de dialogue Imprimer ou "Comme sélectionné à l'écran" dans l'aperçu avant impression.

14
DoctorDestructo

essaye ça:

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

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