The HTML5 Onafterprint Event

The HTML5 onafterprint event is called after print event fires. It is commonly found on the HTML5 body tag. Browser performs content building for printing or print preview and this event will fire after this content building is finished. 

HTML5 onafterprint event can be envoked in several ways. 

  • from menu or context menu or by pressing Crtl+P
  • by invoking window.print() method

Typically you would use the following HTML5 tag with onafterprint:

        <body         onafterprint="handler">

Example below present a complete code sample for HTML5 onafterprint event.



                    .printView {
visibility:     visible;

                 .screenView {
                    visibility:     hidden;


                <script     type="text/javascript">
    window.onbeforeprint = BeforePrintEvent;
    window.onafterprint = AfterPrintEvent;

                    function BeforePrintEvent() {
var div = document.getElementById("myMessage");
div.className = "forPrint";

                    function AfterPrintEvent() {
                        var div = document.getElementById("myMessage ");
div.className = "forScreen";

                    function Print() {

                <div     id=" myMessage "     >Printing your document.</div>
    <button     onclick="Print ();">Print      this page from Website.</button>



Featured pages


Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …


Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…


 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …