javascript - Window.Print ger inte samma resultat som att använda webbläsarens utskriftsfunktion

För ett projekt implementerade vi en anpassad knapp för att skriva ut den aktuella sidan. Genom att använda händelsehanterarna gör vi ytterligare justeringar på sidan, som att ändra färger, visa vissa områden och allt som allt göra den mer utskriftsvänlig.

 window.addEventListener('beforeprint', handleBeforeprint);
 window.addEventListener('afterprint', handleAfterprint);

Implementeringen fungerar endast för de fall när man använder utskriftsfunktionen från webbläsaren eller genom att utlösa webbläsarens utskrift med tangentbordet CMD + P. När jag utlöser utskriften med window.print() triggas inte händelserna.

Svar #1

Jag har stött på ett liknande problem tidigare, och det visar sig att det var en bugg både i Chrome och Firefox. Jag kommer att försöka hitta länken och bifoga den till detta svar. Du kan enkelt trigga en handleBeforeprint-funktion, men du kan stöta på ett problem i handleAfterprint.

Jag har skapat en funktion på följande sätt för mitt användningsfall, det fungerade bara bra.

const print = () =>{
    handleBeforeprint();
    window.print();
    handleAfterprint();
}

Jag har ett annat sätt att göra detta men det är ganska komplext att implementera (jag har gjort det för ett annat projekt) om det är något som verkligen är viktigt för ditt användningsfall så kan du använda något som HTMLtoCanvas. Låt mig veta om du behöver fler detaljer om detta tillvägagångssätt.

Sidohack:

window.printv2 = () => {
    handleBeforeprint();
    window.print();
    handleAfterprint();
}

nu kan du kalla window.printv2() från var som helst ;)