2013-08-20 15 views
35

Nella mia applicazione, ho cercato di stampare una pagina di buono per l'utente, che ho usato:come rilevare window.print() terminare

var htm ="<div>Voucher Details</div>"; 
    $('#divprint').html(htm); 
    window.setTimeout('window.print()',2000); 

'divprint' è un div nella mia pagina che immagazzinano le informazioni relative il buono

Funziona e viene visualizzata la pagina di stampa. Ma voglio ulteriormente procedere con l'applicazione una volta che l'utente clicca 'print' o 'close' la finestra a comparsa.

per esempio, mi piacerebbe reindirizzare utente ad un'altra pagina dopo finestra pop-up si chiude:

window.application.directtoantherpage();//a function which direct user to other page 

Come determinare la finestra di stampa pop-up è chiuso o la stampa è terminata?

risposta

60

In FireFox e Internet Explorer è possibile ascoltare l'evento post stampa.

https://developer.mozilla.org/en-US/docs/Web/API/window.onafterprint

window.onafterprint = function(){ 
    console.log("Printing completed..."); 
} 

Potrebbe essere possibile utilizzare window.matchMedia per ottenere questo functiionality in altri browser.

(function() { 

    var beforePrint = function() { 
     console.log('Functionality to run before printing.'); 
    }; 

    var afterPrint = function() { 
     console.log('Functionality to run after printing'); 
    }; 

    if (window.matchMedia) { 
     var mediaQueryList = window.matchMedia('print'); 
     mediaQueryList.addListener(function(mql) { 
      if (mql.matches) { 
       beforePrint(); 
      } else { 
       afterPrint(); 
      } 
     }); 
    } 

    window.onbeforeprint = beforePrint; 
    window.onafterprint = afterPrint; 

}()); 

Fonte: http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

+1

Tenete a mente che l'ascoltatore media query scatterà 'afterPrint()' immediatamente. Non aspetta fino a quando non si chiude la finestra di dialogo di stampa, motivo per cui la mia risposta ascolta 'mouseover' quando si utilizza la soluzione di media query ... – user113215

+0

@ user113215 Che ne dici di FF e IE? Penso che il nativo in un secondo momento potrebbe aspettare fino a dopo la chiusura del dialogo. – Adam

+0

Corretto, almeno in IE, 'window.onafterprint' si attiva dopo la chiusura della finestra di dialogo. – user113215

3

Vedi https://stackoverflow.com/a/15662720/687315. Come soluzione alternativa, puoi ascoltare l'evento afterPrint nella finestra (Firefox e IE) e ascoltare il movimento del mouse sul documento (indicando che l'utente ha chiuso la finestra di dialogo di stampa e tornare alla pagina) dopo che l'API window.mediaMatch indica che il il supporto non corrisponde più a "stampa" (Firefox e Chrome).

Ricordare che l'utente può o non può aver effettivamente stampato il documento. Inoltre, se chiami troppo spesso window.print() in Chrome, all'utente potrebbe non essere stato richiesto di stampare.

2

È possibile rilevare quando window.print() è terminata semplicemente mettendolo in un'altra funzione

//function to call if you want to print 
var onPrintFinished=function(printed){console.log("do something...");} 

//print command 
onPrintFinished(window.print()); 

testato in Firefox, Google Chrome, IE

+3

Quello che stai facendo è semplicemente il passaggio del valore di ritorno di window.print() a un'altra funzione, quando si chiama onPrintFinished, ovviamente, window.print() verrà eseguito per primo, ma solo se il browser fornisce un metodo printch() sincrono (l'ultimo firefox su linux fornisce questo ad esempio) la funzione onPrintFinished verrà eseguita DOPO la stampa il dialogo è chiuso, su altri browser (ad esempio l'ultimo Chromium) il metodo print() è asincrono quindi è inutile. – emerino

39

su Chrome (V.35.0.1916.153 m Prova questo:

function loadPrint() { 
    window.print(); 
    setTimeout(function() { window.close(); }, 100); 
} 

Funziona alla grande per me. Chiuderà la finestra dopo che l'utente ha finito di lavorare sulla finestra di dialogo di stampa.

+0

Penso che sia la soluzione più semplice. Mi piace! – daVe

+0

Grazie alla tua risposta ho trovato una soluzione semplice: ho aggiunto una nuova risposta con'window.open ('', '_self', ''); 'prima della stampa –

+4

La risposta accettata funziona su pochissimi browser. Mettendo window.close direttamente dopo la stampa, la finestra scompare prima della finestra di dialogo di stampa. Tuttavia, l'uso di setTimeout fa sì che la chiusura sia accodata nella coda degli eventi, il timeout 100ms non è in realtà una cosa temporizzata, il timer verrà bloccato fino alla chiusura della finestra di dialogo di stampa, momento in cui viene avviato il timer 100ms. Una soluzione molto migliore. – Luke

2

Stampa in una nuova finestra con w = window.open (url, '_blank') e prova w.focus(); w.close(); e rilevare quando la pagina è chiusa. Funziona su tutti i browser.

w = window.open(url, '_blank'); 
w.onunload = function(){ 
console.log('closed!'); 
} 
w.focus(); 
w.print(); 
w.close(); 

Finestra chiusa dopo la stampa di finitura.

+0

su IE 11 questo ha funzionato per me, ma solo la prima volta. ogni volta che apro la finestra si chiude automaticamente senza darmi un dialogo di stampa – wintersylf

+0

È un bug di Internet Explorer. Segnala a Microsoft e attendi che abbiano la patch o utilizzi altre alternative. –

0

Su Chrome 41.0 ..Devo mettere questo

si stampa automaticamente a pagina carico:

<body style="background-color:white;" onload="print_window();"> 

JS:

function print_window(){ 
    window.print(); 
    setTimeout(function() { 
    window.open('', '_self', ''); 
    window.close(); 
    }, 100); 
} 

funziona anche per IE 10

2

questo in realtà ha lavorato per me in cromo. Ero abbastanza sorpreso.

jQuery(document).bind("keyup keydown", function(e){ 
    if(e.ctrlKey && e.keyCode == 80){ 
     Print(); e.preventDefault(); 
    } 
}); 

Dove Stampa è una funzione Ho scritto che chiama window.print(); Funziona anche come blocco puro se si disabilita Print();

Come notato qui da user3017502

window.print() farà una pausa in modo da poter aggiungere un onPrintFinish o onPrintBegin come questo

function Print(){ 
    onPrintBegin 
    window.print(); 
    onPrintFinish(); 
} 
4

compatibile con Chrome, Firefox, Opera, Internet Explorer
Nota: jQuery richiesto.

<script> 

    window.onafterprint = function(e){ 
     $(window).off('mousemove', window.onafterprint); 
     console.log('Print Dialog Closed..'); 
    }; 

    window.print(); 

    setTimeout(function(){ 
     $(window).one('mousemove', window.onafterprint); 
    }, 1); 

</script> 
+0

fantastico! Funziona! –

2

Testato IE, FF, Chrome e lavora a tutti.

setTimeout(function() { window.print(); }, 500); 
    window.onfocus = function() { setTimeout(function() { window.close(); }, 500); } 
2

Dato che si desidera attendere che la finestra di dialogo di stampa di andare via userei attenzione vincolante sulla finestra.

print(); 

var handler = function(){ 
    //unbind task(); 
    $(window).unbind("focus",handler); 
} 

$(window).bind("focus",handler); 

Mettendo in unbind in funzione del gestore che impedire l'evento attenzione rimanendo legame alla finestra.

+0

Sembra che tu abbia dimenticato di chiudere il tuo "focus" :) –

1

Penso che l'approccio di messa a fuoco della finestra sia corretto. Ecco un esempio in cui ho voluto aprire un blob url PDF in un iframe nascosto e stamparlo. Dopo la stampa o l'annullamento, volevo rimuovere l'iframe.

/** 
* printBlob will create if not exists an iframe to load 
* the pdf. Once the window is loaded, the PDF is printed. 
* It then creates a one-time event to remove the iframe from 
* the window. 
* @param {string} src Blob or any printable url. 
*/ 
export const printBlob = (src) => { 
    if (typeof window === 'undefined') { 
    throw new Error('You cannot print url without defined window.'); 
    } 
    const iframeId = 'pdf-print-iframe'; 
    let iframe = document.getElementById(iframeId); 
    if (!iframe) { 
    iframe = document.createElement('iframe'); 
    iframe.setAttribute('id', iframeId); 
    iframe.setAttribute('style', 'position:absolute;left:-9999px'); 
    document.body.append(iframe); 
    } 
    iframe.setAttribute('src', src); 
    iframe.addEventListener('load',() => { 
    iframe.contentWindow.focus(); 
    iframe.contentWindow.print(); 
    const infanticide =() => { 
     iframe.parentElement.removeChild(iframe); 
     window.removeEventListener('focus', infanticide); 
    } 
    window.addEventListener('focus', infanticide); 
    }); 
}; 
+0

Sto riscontrando un problema "le esportazioni non sono definite". – aldoblack

0

window.print si comporta in modo sincrono su Chrome .. provare questo nella console

window.print(); 
console.log("printed"); 

"stampato" non viene visualizzato se la finestra di dialogo di stampa è chiuso (annullata/salvato/stampato) dal utente.

Here is a more detailed explanation about this issue.

io non sono sicuro di IE o Firefox li controlleranno e aggiornamento che in seguito

Problemi correlati