Onafterprint Attribute in HTML5

In this article I am going to describe about the implementation and use of Onafterprint Attribute in HTML5.
  • 2096

Onafterprint Event Attribute

The onafterprint attribute fires after the user has set the page to print, and the print dialogue box has appeared.. 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.

The onafterprint attribute is new in HTML5.

Browser Support

The onafterprint event attribute is only supported in Internet Explorer and Firefox. In IE, this attribute occurs before the print dialogue box, instead of after.

It is not supported by Google Chrome, Safari and Opera.

Syntax

<element onafterprint = "script" >

Attribute

  Attribute    Value                           Description
 onafterscript   script   triggers after the document is printed.
 onbeforescript   script   triggers before the document is printed.

Example of onafterprint attribute in HTML5

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

 

    <script type="text/javascript">

        window.onbeforeprint = BeforePrintEvent;

        window.onafterprint = AfterPrintEvent;

 

        function BeforePrintEvent() {

            var div = document.getElementById("anyMessage");

            div.className = "forPrint";

        }

 

        function AfterPrintEvent() {

            var div = document.getElementById("anyMessage ");

            div.className = "forScreen";

        }

 

        function Print() {

            window.print();

        }

    </script>

 

</head>

<body>

    <div id=" anyMessage ">Printing your document.</div>

    <button onclick="Print ();">Print this page from Website.</button>

    <p><b>Tip:</b> Keyboard shortcuts, such as Ctrl+P sets the page to print.</p>

    <p><b>Note:</b> The onafterprint attribute is only supported in Internet Explorer and Firefox.</p>

    <p><b>Note:</b> In IE, the onafterprint attribute occurs before the print dialogue box, instead of after.</p>

</body>

</html>

Output

onaft.jpg

 

  After Button is clicked we get

  onafter.jpg

© 2019 DotNetHeaven. All rights reserved.