Have trouble printing information from your web page? JavaScript does not provide any print methods, although there are some alternative ways that make printing through JavaScript possible. In this article, we highlight two possible options.

What is window.print()?

The JavaScript function window.print() prints the web page which is at runtime. This function can be called out instantly by using the onclick event as it is illustrated in the following code.

<html>
<head>
    <script type="text/javascript">
         < !--
         //-->
    </script>
</head>
 
<body>
    <form>
        <input type="button" value="Print" onclick="window.print()" />
    </form>
</body>
<html>

The type of print dialog popping up in a web browser when applying window.print() will depend on the operating system and a connected printer. Browsers only provide essential data for JavaScript, such as screen proportion, space available in the browser window, etc.

Internet Explorer may be used as a substitution for JavaScript since it contains more information about the browser and operating system than JavaScript itself. Individual computers within a local network can be configured to allow the window.print() command be sent to the printer directly, without displaying a print dialog box. This needs to be configured independently on each device.

Browsers supporting window.print()

  1. Google Chrome - JavaScript and Python programming languages;

  2. Opera (Windows 7 and later, Linux, macOS);

  3. Mozilla Firefox (Windows, Mac OS X, Android, GNU/Linux);

  4. Internet Explorer (for Microsoft Windows operating system);

  5. Safari which is a part of the macOS and iOS operating systems.

Note that with the window.print() method you can get a page with text only. Photos,diagrams, charts, ads, etc. are omitted. However, you are still able to print out all elements by sticking to the following:

  • Make a copy of the page, exclude undesirable information and images and then link it to the page suitable for your printer to print from the original.

  • If you do not need any extra copies of your document, you can put some labels on thetyped text by writing such statements as <! – The starting point of printing ->... .. <! – The end of printing ->. After this, use PERL or any other script to remove the printer-friendly information from the background. Thus, it will be shown on your screen for final printing.

You can use window.print() for printing contents of a div in JavaScript as well. To implement this, save all the information contained in a JavaScript variable and click the Print button. As a pop-up window appears, the content of the HTML div element will be extracted to it and, consequently, will be printed via JavaScript window.print() command.

Practical example

Let's use a window.print() method to print the current content visible in the window screen.

<html>
<head>
<title>
Print Student Registration Form
</title>
<!-- Start the coding for CSS -->
<style>
/* Create the Outer layout of the Calculator. */
.formstyle {
width: 400px;
height: 400px;
margin: 20px auto;
border: 3px solid lightblue;
border-radius: 5px;
padding: 20px;
text-align: center;
background-color: pink;
}
/* Display top horizontal bar that contain some information. */
h1 {
text-align: center;
padding: 23px;
background-color: blue;
color: white;
}
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body background-color="purple">
<h1> Program to print the Student Registration Form using JavaScript print() method </h1>
<div class="formstyle" <form name="form1">
<fieldset>
<legend> Student Registration Form: </legend>
<label> First name </label>
<input type="text" name="fname" size="20" />
<label> Last name </label>
<input type="text" name="lname" size="20" />
<label> Father name </label>
<input type="text" name="f_name" size="20" />
<label> Mother name </label>
<input type="text" name="m_name" size="20" />
<label> Gender:
</label>
<input type="radio" name="gender" /> Male
<input type="radio" name="gender" /> Female
<label>
Address
</label>
<textarea cols="30" rows="3" value="address">
</textarea>
<label>
Email
</label>
<input type="email" id="email" name="email" size="20" />
<label>
Password:
</label>
<input type="password" id="pass" name="leo" size="20">
<input type="reset" value="Reset" />
<input style="background-color:lightblue;" width=40px height=15px type="button" value="Print"
onclick="printFun()" />
</fieldset>
</form>
</div>
<script type="text/javascript">
function printFun() {
window.print();
}
</script>
</body>
</html>

After executing this code in any browser, a registration form will be displayed. Fill the data in and click the Print button which will activate the onclick function and call out the PrintFun() function.

Alternative solutions - print.js

This is a library (npm) that allows you to print a PDF file directly from a link, that is, you do not need to figure out how to open a PDF for printing, the system will do everything itself, and you just need to call out the command:

printJS('docs/printjs.pdf')

A user will also see a standard print dialog containing the specified PDF file. HTML Print allows you to print any block of HTML code, e.g, a div, table, page, form.

printJS('printJS-div', 'html')

The line above will print:

<div id = "printJS-div">… </div>

Also, this function accepts various parameters, such as the title of the printed document.

printJS ({printable: 'print JS-div', type: 'html', header: 'Document title to print'})

This function is also capable of printing one or more pictures, without much complexity, directly linking to the picture. For instance:

printJS({
    printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],
    type: 'image',
    header: 'Several images',
    imageStyle: 'width:45%;margin-bottom:20px;'
})