How to create a print button that opens up a print dialog box

I was tasked to add a print button to a TWiki application that opens up a print dialog box. This one-click option is more user friendly than the standard Print Version => File => Print option. Searching the internet I discovered that this is possible with some JavaScript.

The button could be added directly in topics, but it makes more sense to add it to a header topic that is included by application topics.

Example header topic of a knowledge base application:

The print button works, go ahead and try it out! The edit tab does not save data - this is just a print demo.

The HTML for the print button looks like this:

<div style="float:right; width:160px;" class="commentPlugin">
<a onclick="window.print('%SCRIPTURL{view}%/%BASEWEB%/%BASETOPIC%?cover=print'); return false;"
   href="%SCRIPTURL{view}%/%BASEWEB%/%BASETOPIC%?cover=print"
   class="twikiButton"
   style="display: inline-block; border-radius: 4px;">
&nbsp;%ICON{printtopic}% Print this page&nbsp;
</a>
</div>

Explanation:

• The <div> tag is used to float the button to the right.
  • The class="commentPlugin is added so that the print button does not show up in the printout. TWiki's print skin hides the comment box. If you install PatternSkin 2014-05-15 or later you can specify class="hideInPrint instead.
• The <a> tag, an HTML anchor, has the following parameters:
  • onclick - when clicked, the window.print() JavaScript function is called, passing along the print URL of the base topic. The %SCRIPTURL{view}%/%BASEWEB%/%BASETOPIC% is the URL of the base topic (the topic including the header topic), the cover=print URL parameter enables the print skin. The return false tells the browser to take no further action on the click event.
  • href - this is a fallback in case JavaScript is not available (defensive coding).
  • class and style - to give the anchor link a TWiki button look.

Note: Newlines are added in the <a> tag for clarity, they must be removed if used in TWiki topics!

I hope this small feature comes in handy for your next TWiki application project.

Comments

.