2012-11-28 13 views
6

Sto usando la stampa nel mio progetto (usando HTML e javascript). In mozilla onbeforeprint e onafterprint funziona correttamente ma non funziona in chrome.onbeforeprint e onafterprint non funzionano in Chrome e IE?

+1

Chrome [non sembra avere supporto per questi eventi] (https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeprint#Browser_compatibility). – pimvdb

+0

@pimvdb Quindi, come posso acheive questi eventi in chrome. C'è un evento equivalente per chrome. –

risposta

1

Chrome doesn't have onbeforeprint.

Il metodo preferito per fare questo è quello di utilizzare print media specific stylesheets.

Se è assolutamente necessario rilevare Print operations with javascript cross browser questo sembra promettente, ma non l'ho provato da solo.

+0

mi ha salvato la vita, grazie Ryan. Stavo usando @media print {...} per la stampa della pagina, ma in qualche modo il css veniva ignorato, quindi devo passare attraverso il modo js. questo ha funzionato come un fascino per me. –

-1

In Chrome non funziona onbeforeprint & onAfterPrint.

Ma è possibile limitare la pagina di stampa utilizzando supporti di stampa css

Esempio

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Questa CSS è includere nell'intestazione della pagina.

il CSS avere seguenti stili

#header, #menu, #entry-content, .noprint {display: none;} 
9

ciò che funziona per Chrome è quello di verificare la presenza di 'matchmedia' nella 'finestra' come in:

   if ('matchMedia' in window) { 
        window.matchMedia('print').addListener(function (media) { 
        //do before-printing stuff 
        }); 
       } else { 
        window.onbeforeprint = function() { 
        //do before-printing stuff 
        } 
       } 
+2

L'ascoltatore sembra essere attivato due volte quando il documento viene stampato (utilizzando addListener). L'argomento dei media sembra non essere molto diverso in queste due chiamate, ad eccezione del timestamp ... –

+2

media.matches sarà 'true' prima della stampa, e false in seguito. – sabof

1

Chrome non supporta quegli eventi. Supporta invece 'window.matchMedia'. Inoltre c'è un bug in Chrome che impedisce di stampare tutte le pagine. Per questo motivo, ti suggerisco di aggiungere un pulsante di stampa alla tua pagina web e chiedere agli utenti di utilizzare il pulsante invece di stampare tramite il menu Chrome.

var beforePrint = function() { 
    console.log("before"); 
}; 
var afterPrint = function() { 
    console.log("after"); 
}; 

var launchedFromMenu = true; 
if (window.matchMedia) { 
    var mediaQueryList = window.matchMedia('print'); 
    mediaQueryList.addListener(function(mql) { 
     if (mql.matches) { 
      if(launchedFromMenu) { 
       // https://bugs.chromium.org/p/chromium/issues/detail?id=571070 
       alert("There is a bug in Chrome/Opera and printing via the main menu does not work properly. Please use the 'print' icon on the page."); 
      } 
      beforePrint(); 
     } else { 
      afterPrint(); 
     } 
    }); 
} 

// These are for Firefox 
window.onbeforeprint = beforePrint; 
window.onafterprint = afterPrint; 

function printPage() { 
    window["beforePrint"](); 
    launchedFromMenu = false; 
    window.print(); 

} 
0

aggiornamento rapido, perché il supporto degli eventi di stampa has improved a lot

  • Chrome 63, uscite nel mese di dicembre 2017, sostiene che source
  • Opera 50 e
  • bordo supporta fin dall'inizio
  • anche la vecchia versione 6 di IE (6 !!) lo supporta
Problemi correlati