Lab5: Printing Webpage

In this tutorial, we would implement print function for the webpages. The procedure consists of define the print style for the page and invoke browser print dialog when user click on the page.

Setting up print style for webpage

There are several ways to define print style for a webpage. We could specify it as for printing on linking external stylesheet to the page. Or we could define print styles in <style> tag using media query.

Method 1: Specify media type for external stylesheet

When linking external stylesheet using <link> tag, we could specify the CSS file is for screen or print by media=".." attribute.

<link rel="stylesheet" media="print"  href="print.css">

Method 2: Using media query in CSS

We could apply style to screen or print using media query as the following example.

@media print {  
	html, body  {
		width: 48mm; // target page width
		background-color: #fff;
		color: #000;
	}
}
@media screen {  
	html, body  {
		background-color: #333;
		color: #fff;
	}
}

Showing print dialog in browser

We would like to prompt up the print dialog directly when the user click on the print button. It would just like helping the user to click on the print button in Browser.

Here are the steps.

Step 1: Showing the print for print

Open the webpage for print in new window. We could done by setting target="_blank" attribute in <a href=".."> or using Javascript.

<a href="/url_for_print_pager" target="_blank">Print</a>

Or using Javascript as follows.

window.open("/url_/for_/print_page");

Step 2: Invoke the print dialog

In the webpage for print, we need to invoke the browser print dialog using Javascript.

window.print();

Step 3: Close the window after print

After that, we could close the window and browser would return to the previous page.

window.onfocus = () => window.close();

Step 4 (Optional): Invoke those Javascript on page loaded

Sometime, we need to run those code when the page is loaded. We could done it by wrapping code in window.onload function.

window.onload = () => {
  window.print();
  window.onfocus = () => window.close();
};

Example 1: Print all persons in ls05

Let’s do an example using ls05. We would add a new page for printing out all persons in our database.

Adding controller action

print: async function (req, res) {
	constvar qrcode = require('qrcode-generator');
	var persons = await Person.find();
	return res.view('person/print', {'persons': persons.map(person => {
		let qr = qrcode(4, 'H');
		qr.addData(`${person.id}`);
		qr.make();
		person.imgqrcode = qr.createDataURL();
		return person;
	}) });
}

Adding route

'/person/print':'PersonController.print',

Adding view

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Persons</title>
	<style>
	html, body {
		width: 248mm;
	}
	</style>
</head>

<body>
	<% persons.forEach(person => { %>
		<div style="margin-bottom:1em">
			<h5><%= person.name %></h5>
			<div>Age: <%= person.age %></div>
			<img src="<%= person.imgqrcode %>" />
		</div>
	<% }); %>
	<script>
		window.print();
		window.onfocus = () => window.close();
	</script>
</body>
</html>

Adding print button in index.ejs

Finally, we add a print button to the index page.

<a href="/person/print" target="_blank">Print</a>

Written with StackEdit.