it-swarm.com.de

Verwenden von Javascript zum Drucken von Bildern

Ich möchte wissen, ob es möglich ist, Javascript zu verwenden, um ein Popup-Fenster zu öffnen, das ein Bild enthält, und gleichzeitig den Druckdialog anzuzeigen. Sobald jemand auf den Druck klickt, wird das Popup geschlossen.

Ist das leicht erreichbar?

14
andrew
popup = window.open();
popup.document.write("imagehtml");
popup.focus(); //required for IE
popup.print();
22
Javier Parra

Eine weitere tolle Lösung !! Alle Gutschriften gehen an Codescratcher

<script>

    function ImagetoPrint(source)
    {
        return "<html><head><script>function step1(){\n" +
                "setTimeout('step2()', 10);}\n" +
                "function step2(){window.print();window.close()}\n" +
                "</scri" + "pt></head><body onload='step1()'>\n" +
                "<img src='" + source + "' /></body></html>";
    }

    function PrintImage(source)
    {
        Pagelink = "about:blank";
        var pwa = window.open(Pagelink, "_new");
        pwa.document.open();
        pwa.document.write(ImagetoPrint(source));
        pwa.document.close();
    }

</script>

<a href="#" onclick="PrintImage('YOUR_IMAGE_PATH_HERE.JPG'); return false;">PRINT</a>

Siehe das vollständige Beispiel hier .

18
ricardo_escovar

Verwenden Sie dies im Kopfblock

<script type="text/javascript">
function printImg() {
  pwin = window.open(document.getElementById("mainImg").src,"_blank");
  pwin.onload = function () {window.print();}
}
</script>

verwenden Sie dies im Body Block

<img src="images.jpg" id="mainImg" />
<input type="button" value="Print Image"  onclick="printImg()" />
8
Zahid Habib

Dieser Code öffnet YOUR_IMAGE_URL in einem Popup-Fenster, zeigt den Druckdialog und schließt das Popup-Fenster nach dem Drucken.

var popup;

function closePrint () {
    if ( popup ) {
        popup.close();
    }
}

popup = window.open( YOUR_IMAGE_URL );
popup.onbeforeunload = closePrint;
popup.onafterprint = closePrint;
popup.focus(); // Required for IE
popup.print();

MDN Referenzcode

4
Igor Jerosimić

Ja, setzen Sie einfach das Bild auf den Bildschirm und rufen Sie window.print(); in Javascript auf, und es sollte ein Popup erscheinen.

(So ​​drucken Google Maps/Google Calendar)

1
Mitch Dempsey

Ich habe eine Kaffeeskript-Funktion geschrieben, die das tut (aber ohne ein neues Fenster zu öffnen):

@print_img = (url) ->
$children = $('body').children().hide()
$img = $('<img>', src: url)
$img.appendTo('body')

$img.on 'load', ->
  window.print()
  $(this).remove()
  $children.show()

Oder wenn Sie lieber in Javascript sind:

this.print_img = function(url) {
  var $children, $img;
  $children = $('body').children().hide();
  $img = $('<img>', {
    src: url
  });
  $img.appendTo('body');

  $img.on('load', function() {
    window.print();
    $(this).remove();
    $children.show();
  });
};

Diese Funktion stellt sicher, dass die Elemente des Hauptteils ausgeblendet und nicht in das DOM gezeichnet werden. Außerdem wird sichergestellt, dass das Bild vor dem Aufruf von print geladen wird (wenn das Bild zu groß ist und die Internetverbindung langsam ist. Es kann etwas dauern, bis das img geladen wird. Wenn Sie den Druckvorgang zu früh aufrufen, wird eine leere Seite gedruckt.

0

Ich habe gerade 45 Minuten mit diesem "SIMPLE" -Problem verbracht und versucht, es so zu gestalten, wie ich es wollte.

Ich hatte ein Bild in einem img-Tag, das dynamisch von einem jQuery Barcode-Plugin generiert wurde, das ich drucken musste. Ich wollte, dass es in einem anderen Fenster gedruckt wird und anschließend das Fenster geschlossen wird. Dies sollte alles passieren, nachdem der Benutzer innerhalb eines jQuery Grid-Dialogfelds auf eine Schaltfläche in einem jQuery-UI-Plugin geklickt hat, und der jQuery-UI-Dialog-Extender darauf angewendet wurde.

Ich habe alle Antworten korrigiert, bis ich mir das schließlich ausgedacht habe, vielleicht kann es jemandem helfen.

w = window.open(document.getElementById("UB-canvas").src);
w.onload = function () { w.print(); }
w.onbeforeunload = setTimeout(function () { w.close(); },500);
w.onafterprint = setTimeout(function () { w.close(); },500);

Die Variable setTimeout ist nicht nur für Scheiße und Kichern gedacht, es ist die einzige Möglichkeit, dass Firefox 42 diese Funktionen treffen würde. Es würde einfach die .close()-Funktionen überspringen, bis ich einen Haltepunkt hinzugefügt habe, dann hat es perfekt funktioniert. Ich gehe also davon aus, dass diese Fensterinstanzen erstellt wurden, bevor sie die Ereignisfunktion onbeforeload und die Ereignisfunktionen onafterprint oder etwas anderes anwenden könnten.

0
Kickass

Das funktioniert in Chrome: 

  <body ><img  src="image.jpg" alt="" style="display: block; width: 100%; height: 100%;">

            <script type="text/javascript">
                window.onload = function() {
                    window.print();
                    setTimeout(function() {
                        window.close();
                    }, 1);
                };
            </script>
    </body>
0
DD.