This repository is a basically fork of print.js
by Rodrigo Vieira. Additional content in the repository are added to understand the underlying concept of selected printing of content elements with and without print.js
.
Content added to this fork are added as support for the learning resource AppLSAC
in Wikiversity (see Wikiversity AppLSAC/Print
.
Javascript code can be used to creates a print job from the browser. With print.js
specific content elements can be submitted to printer API of the browser. Examples for content elements are:
- Form content,
- Images in a canvas,
- PDF files,
- Content of a textarea,
- ...
Javascript has as
print()
method of thewindow
object of the browser, but this method allow the printing of content of the current browser window only.print.js
allows printing of specific content elements by calling thewindow.print()
function on new window, that contains the desired content only. This concept leads to the 4 main steps: - (Open Window) Open a new browser window,
- (Create Content) write the content, that should be printed into the browser window with Javascript,
- (Call Printer API) call the
window.print()
function for the generated browser window, - (Close Window) close the browser window
This repository was forked from print.js
and inspired by developements of Rodrigo Vieira (Github User: crabbly). The repository is used learn about printing methods within a Javascript WebApps.
Table of Contents generated with DocToc
The next steps describe the basic constituents of creating a print job within a WebApp. The following code shows the underlying software design.
<html>
<head></head>
<body>
<input type="button" value="Open Print Window" onclick="openPrintWindow()" />
</body>
<script type="text/javascript">
function openPrintWindow(pURL) {
var print_win = window.open(pURL);
print_win.focus();
return print_win
}
function addPrintContent(pPrintWin,pContent) {
// pContent = '<h1>Hello, World!</h1>';
// append to document body
pPrintWin.document.body.innerHTML += pContent;
}
// var vPrintWin = openPrintWindow('about:blank');
var vPrintWin = openPrintWindow('print_win.html');
addPrintContent(vPrintWin,"<h1>Hello, World!</h1>");
vPrintWin.print();
</script>
</html>
For application in a WebApp (e.g. AppLSAC use the library print.js
.
the following HTML code shows a basic concept of opening a printer window.
// create a new printer window
var print_win = window.open('printwindow.html');
// set the focus to the browser window
print_win.focus();
// create a new printer window
var print_win = window.open('about:blank');
// set the focus to the browser window
print_win.focus();
var content = '<h1>Hello, World!</h1>';
// append to document body
print_win.document.body.innerHTML += content;
Assume the window with the generated content in vPrintWin
then the content can be submitted to the printer with the vPrintWin.print()
command.
In general closing a window is called with window.close()
. In this case we are closing the window with the Printer Content. The printer window can be closed with vPrintWin.close()
, if the window was created/opened from the WebApp with Javascript (see alsoAppLSAC .
// create a new printer window
var print_win = window.open('printwindow.html');
// set the focus to the browser window
print_win.close();
The following function loads the content of a textarea and writes the HTML content in a new browser window. The content of the browser window will be printed.
function printTextArea() {
console.log("Print HTML content in textarea with the ID='mytextarea'");
var print_win = window.open("","wPrintWin","width=300,height=300,scrollbars=1,resizable=1");
var html = document.getElementById("mytextarea").value;
// Open a print window print_win
print_win.document.open();
print_win.document.write(html);
print_win.document.close();
print_win.focus();
print_win.print();
print_win.close();
}
The following file shows the content of print_win_css.html
:
<html>
<link href="css/print.css" rel="stylesheet">
<head>
<title>
Printer Window CSS
</title>
</head>
<body>
</body>
</html>
The style sheet css/print.css
format the output to the desired layout (e.g. font size, fonts, ...)
The window of loaded HTML page itself cannot be closed with window.close()
. This is not a bug. This a security feature, because web sites should not be able to close a browser window with all open tabs, because the user might loose the content of forms in that window.