it-swarm.com.de

Standardmäßiges Überschreiben des Standardbrowsers und Drucken eines Iframes

Ich habe eine Dokumentationsseite mit einem iFrame. Ich versuche, den Standardbrowserdruck (Strg + P) zu überschreiben, um nur den Inhalt eines Iframes zu drucken.

Ich kann einen Iframe-Inhalt mit Javascript drucken:

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

Ich kann Javascript vor dem Drucken ausführen, z. wie hier beschrieben: Prüfen Sie, ob ein Benutzer mit JavaScript zum Drucken ausgewählt hat

Irgendwelche Ratschläge?

Vielen Dank

13
Burjua

Es ist nicht möglich (mit Javascript). Es gibt experimentelle Unterstützung für vom Benutzer initiierte Druckereignisse in modernen Browsern. Diese sind jedoch nicht stornierbar ("einfache Ereignisse"), so dass die gesamte Seite auch dann gedruckt wird, wenn Sie zum Ausdrucken des gewünschten Frames benutzerdefinierten Code einfügen.

Angesichts dieser Einschränkung ist es am besten, wenn Sie den Benutzern eine große Schaltfläche anbieten, mit der Ihre benutzerdefinierte Frame-Druckfunktion ausgelöst wird (siehe printContentFrameOnly unten, feuern Sie sie ohne Argumente aus) und hoffen, dass sie die Schaltfläche anstelle von Strg-p verwenden.

Wenn möglich wäre wäre dies der Weg (basierend auf dieser Antwort ):

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

Bruder, das kann leicht durch CSS erreicht werden: Siehe thisJSfiddle: Tested

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

Lassen Sie eine HTML-Datei sein:

<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

Die Idee ist, den Iframe-Inhalt irgendwo auf der Seite festzulegen und NUR diesen Inhalt zu drucken, indem der ursprüngliche Inhalt ausgeblendet wird.

Dazu können Sie den iframe-Inhalt abrufen, wenn das Ctrl + P-Ereignis (über JavaScript) initiiert wird, und nur dessen Inhalt (über den Typ CSS @media) drucken.

HTML Quelltext:

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

CSS-Code:

@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 */
    }
}

JavaScript-Code:

        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

Sie können eine CSS-Datei zum Drucken definieren:

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

BEARBEITEN

Mein Bad hat es nicht getestet.

* { display: none; } is somehow overwriting all

Aber das funktioniert wie ein Zauber

http://jsfiddle.net/c4e3H/

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

Die einzige Möglichkeit, die mir einfällt, besteht darin, den gesamten Inhalt des Dokuments mit Ausnahme des Iframes auszublenden und ihn an das gesamte Dokument anzupassen.

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

Ich habe Timeout verwendet (fies, weiß ich), weil zumindest Chrome 38 das Keyup-Ereignis nicht nach Strg + P sendet

0

Hallo, vielleicht hilft Ihnen dieser Code.

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

und rufen Sie die Funktion PrintElem ('iframe') auf Ihrer Seite auf.

0
user2706194