web-dev-qa-db-fra.com

Comment remplacer l'impression standard du navigateur et imprimer un iframe par défaut

J'ai une page de type de documentation avec un iframe à l'intérieur. J'essaie de remplacer l'impression standard du navigateur (Ctrl + p) pour imprimer le contenu d'un iframe uniquement.

Je sais comment imprimer un contenu iframe à l'aide de javascript:

window.frames['webcontent'].focus();
window.frames['webcontent'].print();

Je sais comment exécuter javascript avant d'imprimer, par exemple. comme décrit ici: Vérifier quand un utilisateur a choisi d'imprimer en javascript

Un conseil?

Merci

javascriptjqueryhtmliframeprinting
13
Burjua

Ce n'est pas possible (avec Javascript). Il existe un support expérimental pour les événements d'impression initiés par l'utilisateur dans les navigateurs modernes, mais ceux ne sont pas annulables ("événements simples"), de sorte que toute la page reste imprimée même si vous interjectez du code personnalisé pour imprimer le cadre qui vous intéresse.

Compte tenu de cette limitation, votre meilleur choix est probablement d'offrir aux utilisateurs un gros bouton qui déclenche votre fonction d'impression de cadre personnalisée (voir printContentFrameOnly ci-dessous, activez-le sans arguments) et en espérant qu'ils utiliseront le bouton au lieu de ctrl-p.

Si serait possible, ce serait le moyen de le faire (basé sur cette réponse ):

// listener is a function, optionally accepting an event and
// a function that prints the entire page
addPrintEventListener = function (listener) {

    // IE 5.5+ support and HTML5 standard
    if ("onbeforeprint" in window) {
        window.addEventListener('beforeprint', listener);
    }

    // Chrome 9+, Firefox 6+, IE 10+, Opera 12.1+, Safari 5.1+
    else if (window.matchMedia) {
        var mqList = window.matchMedia("print");

        mqList.addListener(function (mql) {
            if (mql.matches) listener();  // no standard event anyway
        }); 
    }

    // Your fallback method, only working for JS initiated printing
    // (but the easiest case because there is no need to cancel)
    else {    
        (function (oldPrint) { 
            window.print = function () {
                listener(undefined, oldPrint);
            }
        })(window.print);
    }
}

printContentFrameOnly = function (event) {
    if (event) event.preventDefault();  // not going to work
    window.frames['webcontent'].focus();
    window.frames['webcontent'].print();
}

addPrintEventListener(printContentFrameOnly);
6
Julian

Frère, cela peut être facilement réalisé via CSS: Voir ceJSfiddle: Testé

<style>
@media print{
    body * {display:none;}
    .toPrint{display:block; border:0; width:100%; min-height:500px}
}
</style>

Soit un fichier HTML soit:

<body>
    <h3>I do not want this title Printed</h3>
    <p> This paragraph should not be printed</p>
    <iframe class="toPrint" src="http://akitech.org"></iframe>
    <button onclick="window.print()">Print</button>
</body>
22
tika

L'idée est de définir le contenu de l'iframe quelque part sur la page et d'imprimer UNIQUEMENT ce contenu en masquant le contenu d'origine.

Cela peut être fait en récupérant le contenu de l'iframe lors du lancement de l'événement Ctrl + P (via JavaScript) et en imprimant uniquement son contenu (via CSS @ type).

Code HTML:

    <div id="dummy_content"><!-- Here goes the iframe content, which will be printed --></div>
    <div id="content_wrapper">
        <div id="current_content">Current Content that the user see<div>
        <iframe id="myIframe" src="iframe.html"></iframe>
    </div>

Code CSS:

@media screen {
    #dummy_content {
        display:none; /* hide dummy content when not printing */
    }
}            
@media print {
    #dummy_content {
        display:block; /* show dummy content when printing */
    }
    #content_wrapper {
        display:none; /* hide original content when printing */
    }
}

Code JavaScript:

        var dummyContent = document.getElementById("dummy_content");
        function beforePrint() {
              var iFrame = document.getElementById("myIframe");
              dummyContent.innerHTML = iFrame.contentWindow.document.body.innerHTML; // populate the dummy content (printable) with the iframe content
        }

        document.onkeydown = function(e) {
            if (e.ctrlKey && e.keyCode == 80) {
                beforePrint();
            }
        }
4
Yonatan Ayalon

Vous pouvez définir un fichier css à imprimer:

  @media print {
    * { display: none; }
   iframe { display: block; }
  }

MODIFIER

Mybad ne l'a pas testé.

* { display: none; } is somehow overwriting all

Mais cela fonctionne comme un charme

http://jsfiddle.net/c4e3H/

  @media print {
    h1, p{ display: none; }   
  }
1
jungerislaender

Le seul moyen auquel je puisse penser est de cacher tout le contenu du document, à l'exception de l'iframe, et de l'adapter à l'ensemble du document.

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
body.hide *, body #backdrop
{
    display: none !important;
}   
body.hide #my_print_iframe, body.hide #backdrop
{
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 0;
    width: 100%;
    height: 100%;
    display: block !important;
}
@media print {
    body.hide #backdrop
    {
        display: none !important;
    }
}
</style>
  <script>
    $(document).on('keydown', function(e){
        if (e.keyCode == 80 && ( e.metaKey || e.ctrlKey ) ) {
            $("body").addClass('hide');
            setTimeout(function(){
                $("body").removeClass('hide');
            },1000)
       }
    })
  </script>
</head>
<body>
  <div>
    this is some visible text
  </div>
  <iframe id="my_print_iframe" src="//example.com"></iframe>
</body>
</html>

J'ai utilisé timeout (méchant je sais) car au moins chrome 38 n'envoie pas l'événement keyup après Ctrl + P

0
Alexandru Eftimie

Bonjour, ce code pourrait vous aider.

function PrintElem(elem)
{
     Popup($(elem).html());
}

function Popup(data)
{
     var mywindow = window.open('', 'printMe', 'height=400,width=600');
     mywindow.document.write('<html><head><title>Print Me</title>');
     mywindow.document.write('</head><body >');
     mywindow.document.write(data);
     mywindow.document.write('</body></html>');

     mywindow.print();
     mywindow.close();

     return true;
}

et appelez la fonction PrintElem ('iframe') sur votre page.

0
user2706194