2010-05-25 28 views
12

Ich würde gerne wissen, ob es möglich ist, Javascript zu verwenden, um ein Popup-Fenster mit einem Bild zu öffnen, und gleichzeitig den Druckdialog anzeigen zu lassen. Sobald jemand auf Drucken klickt, schließt sich das Popup.Verwenden von Javascript zum Drucken von Bildern

Ist das leicht erreichbar?

Antwort

1

Ja, legen Sie einfach das Bild auf dem Bildschirm, und rufen Sie dann window.print(); in Javascript und es sollte Popup.

(Dies ist, wie Google Maps/Google Kalender tut Druck)

+1

Kühl. Aber was, wenn ich möchte, dass ein anderes Bild zeigt, dass das Popup-Fenster startet? – andrew

+0

Überprüfen Sie die CSS-Stile zum Drucken. Sie können grundsätzlich ein Bild in der Bildschirmansicht verbergen und dann für die Druckansicht sichtbar machen. –

21
popup = window.open(); 
popup.document.write("imagehtml"); 
popup.focus(); //required for IE 
popup.print(); 
+0

Wie würde das mit einem Knopf funktionieren? Die Schaltfläche würde diese Aktion initiieren, druckt jedoch ein separates Bild. – andrew

+2

Ich werde nicht den ganzen Code für Sie schreiben, der Punkt dieses Ortes ist zu lernen. ;) Sie würden es mit dem Onmouseup-Ereignis auf der Schaltfläche tun: http://www.w3schools.com/jsref/event_onmouseup.asp –

+2

Ich möchte nicht, dass Sie es für mich schreiben ... nur wollen auf die richtigen Ressourcen hingewiesen werden. Ich brauche einen Platz um anzufangen. Vielen Dank. – andrew

8

diese Verwendung in dem Kopfblock

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

diese Verwendung in dem Körperblock

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

Dies funktioniert nicht in der Chrome-Konsole. – Flea777

0

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

Dieser Code öffnet YOUR_IMAGE_URL in einem Popup-Fenster, zeigt den Druckdialog an 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 Reference code

12

Eine andere große Lösung !! Alle Kredit geht an Codescratcher

<script type="text/javascript"> 
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(); 
} 

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

die vollständige Beispiel finden Sie hier: http://www.codescratcher.com/javascript/print-image-using-javascript/#comment-762

+0

Warum gibt es eine Zeitüberschreitung von 10 ms? Warum nicht einfach '' – Shasak

+0

Diese Codescratcher-Site ist ein wenig verwirrend Ich habe diesen Code auf meinen GitHub-Account hochgeladen: Siehe Demo hier https://rawgit.com/orellacne/printFromJavascript/master/Print_Image.htm Code ist bei: https: //github.com/orellabac/printFromJavascript/ – orellabac

0

ich nur 45 Minuten auf dieser "einfachen" Problem verbracht und versucht, es so, wie ich zu bekommen wollte, dass es funktioniert.

Ich hatte ein Bild in einem Img-Tag, dynamisch generiert von einem jQuery Barcode Plugin, das ich drucken musste. Ich wollte, dass es in einem anderen Fenster druckt und danach das Fenster schließt. Dies sollte geschehen, nachdem der Benutzer eine Schaltfläche innerhalb eines jQuery Grid Plugins innerhalb eines jQuery-UI Dialogs zusammen mit dem Dialog-Extender jQuery-UI angeklickt hat.

Ich habe alle Antworten angepasst, bis ich endlich dazu kam, 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 setTimeout ist nicht nur für scheißt und kichert, es ist der einzige Weg, ich Firefox 42 gefunden würde diese Funktionen getroffen. 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 onafterprint-Ereignisfunktionen oder etwas Ähnliches anwenden konnten.

Verwandte Themen