WebApps with LocalStorage and AppCache/Print
This learning resource focuses on print generated content in the WebApp. The content is considered as result of processing data totally with the browser without submission to a remote server (see design of an AppLSAC)
Demo Files for Printing in an AppLSAC
editThe repository Print4JS contains a list of examples that are generated for this repository as quickstart. The shell script scan_demos4readme.sh
generated file ./src/readme/demos.md
which are also included with PanDoc/Try
. Check out the demos to explore the underlying principles of client-side printing with contacting a remote server.
- Demo 1: Print Content in Textarea
- Demo 2: Print Code
- Demo 3: Print Code with Print Window
- Demo 4: Print Code with Syntax Highlighting
- Demo 1: Print Content in Textarea
- Demo 6: Print PDF with html2pdf
- Demo 7: Print JSON with Handlebars Template Engine
- Print Window for Code with highlight.js
pandoc 2.7.3
Print4JS - Print Page for JavaScript
editThe repository [1] is a fork of print.js
and will be maintained as a learning resource for AppLSAC
. Javascript code can be used to creates a print job from the browser. With the library print.js a WebApp is able to print specific browser content like
- Form content,
- Images in a canvas,
- PDF files,
- Content of a textarea,
- ... Javascript has as
window.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.
Print4JS Steps
editThe 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('printwindow.html');
addPrintContent(vPrintWin,"<h1>Hello, World!</h1>");
vPrintWin.print();
</script>
</html>
For application in a WebApp (e.g. AppLSAC use the library print.js
.
Open Browser Window
editthe 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();
Write Content to Browser Window
edit// create a new printer window
var print_win = window.open('printwindow.html');
// set the focus to the browser window
print_win.document.body.innerHTML += '<h1>Hello, World!</h1>';
Call Printer Dialog
editAssume the window with the generated content in vPrintWin
then the content can be submitted to the printer with the vPrintWin.print()
command.
Close Printer Content Window
editIn 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 also AppLSAC).
HTML Content of Printer Window
editThe following file shows the content of printwindow.html
:
<html>
<link href="css/print.css" rel="stylesheet">
<head>
<title>
Printer Window
</title>
</head>
<body>
</body>
</html>
The style sheet css/print.css
format the output to the desired layout (e.g. font size, fonts, ...)
Remark
editThe 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.
See also
edit- Original print.js library by Rodrigo Vieira (Github User: crabbly
- Forked github repository print4js library for this Wikiversity Learning Resource with Fork Source: crabbly@print.js