Print a web page content using JavaScript

learning javascript

Are you aware of printing the content of a web page via an actual printer using JavaScript? Don’t get confuse!

JavaScript can help you to implement print functionality using a print function of window object. This works on all modern browsers, so this can be a valid substitute inside a browser where toolbar is disabled.

Here is the syntax to print using JavaScript:

window.print()

The JavaScript print() method prints the contents of a current window.
This opens a Print Dialog Box, which tells the user to select desired printing options.

Browser Support: Chrome, Internet Explorer, Firefox, Safari, Opera.

You can use this function using the onclick event as shown in the example below:

<html>
<head>
</head>
<body>
<form>
<input type="button" value="Print" onclick="window.print();" />
</form>
</body>
<html>

Always make sure that your visitor’s browser have JavaScript enabled before providing them a button that works using JavaScript.

Read Also: HTML noscript Tag

If this is disabled then, saving them frustration of clicking a same button which does absolutely nothing:

<script language="JavaScript">
if (window.print) {
document.write('<form><input type="button" value="Print" onclick="window.print();" /></form>');
}
</script>

If you do not like the functionality about print using JavaScript on a web page, then you can use the browser’s default toolbar to get print a web page like below:
File >  Print > Click OK  button.

Printing Suggestions:

  • Ready a page for printing
  • Make that page printer friendly
  • Allow users to choose to print
  • Never attach this to any user event

Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.

Leave a Reply

Your email address will not be published. Required fields are marked *