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

J'ai une documentation type de page avec une iframe à l'intérieur. Je suis en train de remplacer la norme d'impression du navigateur (Ctrl + p) pour imprimer le contenu d'une iframe.

Je sais comment faire pour imprimer une iframe de contenu à l'aide de javascript:

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

Je sais comment le faire exécuter javascript, avant l'impression, par exemple comme décrit ici: Vérifier quand un utilisateur a sélectionné pour imprimer à l'aide de javascript

Tout conseiller?

Grâce

source d'informationauteur Burjua | 2014-07-25

  1. 6

    Il n'est pas possible (à l'aide de Javascript). Il y a quelque support expérimental pour l'utilisateur de lancer l'impression des événements dans les navigateurs modernes, mais ceux ne sont pas annulables ("de simples événements"), de sorte que la totalité de la page s'imprime toujours même si vous intervenir code personnalisé pour imprimer le cadre de l'intérêt.

    Compte tenu de cette limitation, votre meilleur pari est probablement pour offrir aux utilisateurs un gros bouton qui déclenche votre image personnalisée de la fonction d'impression (voir printContentFrameOnly ci-dessous, le feu sans arguments) et l'espoir qu'ils vont utiliser le bouton au lieu de ctrl-p.

    Si il serait être 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);
  2. 22

    Frère, cela peut être facilement atteint grâce à CSS: Voir thisJSfiddle: Testé

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

    Laissez un Fichier HTML:

    <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>
  3. 4

    L'idée est de définir le contenu de l'iframe quelque part sur la page, et d'imprimer UNIQUEMENT que le contenu, en cachant le contenu original.

    Cela peut être fait par l'obtention de l'iframe contenu lorsque Ctrl+P de l'événement est lancé (via JavaScript), et d'imprimer uniquement de son contenu (via CSS @media 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. 1

    Vous pouvez définir un fichier css pour l'impression:

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

    MODIFIER

    Mybad na pas testé.

    * { display: none; } is somehow overwriting all

    Mais c'est de travailler comme un charme

    http://jsfiddle.net/c4e3H/

  @media print {
    h1, p{ display: none; }   
  }
  5. 0

    La seule façon que je peux penser à est de cacher tout le contenu dans le document (à l'exception de l'iframe et la rendre adaptée à 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é délai d'attente ( méchant je sais ) parce qu'au moins, chrome 38 ne pas envoyer l'événement keyup après un ctrl+p

  6. 0

    Salut peut-être ce code va 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 appeler la fonction PrintElem('iframe') sur votre page.