How to print using an in-app print button (HTML)

  • Article

This tutorial shows how to add a print button to your Windows Store app.

By default, a user prints from an app by selecting a print device from the Devices charm. You can let the user initiate a print job from your app's UI by calling ShowPrintUIAsync when the user clicks a button.

Roadmap: How does this topic relate to others? See:

What you need to know

Technologies

Prerequisites

  • You must be familiar with HTML, JavaScript, Windows events, and event handling.
  • You must have Microsoft Visual Studio installed.
  • You must have a printer installed.
  • You must have a Windows Store app to which you want to add a print button. If you don't have your own app, you can download the Print Sample sample app and use that app.
  • Your app must support basic Windows printing. If it doesn't, review Quickstart: Printing from your app to learn how to add basic Windows printing support to your app.

Instructions

Step 1: Open your app in Visual Studio

The procedure described in this tutorial refers to the PrintSampleJS app from the Print Sample sample app. If you are adding a print button to your own app, open your app in Visual Studio instead of the Print Sample sample app.

  1. Open the Print Sample sample app and download the JavaScript example to your computer.
  2. In Visual Studio, click File > Open Project and go to the folder that contains the solution file of the sample app that you downloaded in the previous step.
  3. Select the PrintSampleJS solution file and click Open.

Step 2: Build and test the app

  1. Click Build > Build Solution to build the app you are working on. Make sure that there are no error messages in the Output pane at the bottom of the screen.
  2. Click Debug > Start Without Debugging.
  3. Verify that, after a few seconds, the screen displays the Print JS Sample app.
  4. If the app runs without error, return to Visual Studio and click Debug > Stop Debugging.

Step 3: Define the styles to use when printing

To format the app's screen for printing, create a cascading style sheet (CSS) that defines the styles that change when printing.

To prevent sections of the display from appearing in the printed output—for example the print button you'll add in this tutorial—define those styles as display: none.

  1. Define the styles to use when printing. For example, this is the print.css file that the Print Sample sample app includes to define the styles used by the sample app when it prints.

    #rootGrid
{
    width: 100%;
    height: 100%;
    display: block;
}

#inputLabel, #outputLabel, #input, #statusMessage
{
    display: none;
}

.article
{
    border:none;
}

  2. Include the style sheet in your app by adding the following code to the head tag of the HTML file for the screen with the print button. To make sure this style sheet is applied only when the screen is printed, be sure to include the media="print" attribute.

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

Step 4: Add the print button

In this step, you'll add the print button to the screen and you'll create the click-event handler for the print button.

  1. Add the button to your app's screen where you'd like it to appear. Make sure that it doesn't interfere with the content that you want to print.

    This example is from scenario2.html of the Print Sample sample app.

    <button id="Print">Print</button>

  2. Add the print button event handler to your app's JavaScript code.

    This example, from scenario2.js of the Print Sample sample app, also adds functions that will be called by Windows printing before and after the print job. These are defined but not used in the Print Sample sample app; however, they could be used for preprocessing or post-processing of the printed content.

    function PrintButtonHandler() {
    // Optionally, functions to be executed immediately before and after printing can be configured as following:
    window.document.body.onbeforeprint = beforePrint;
    window.document.body.onafterprint = afterPrint;

    // If the print contract is registered, the print experience is invoked.
    Windows.Graphics.Printing.PrintManager.showPrintUIAsync();
}

  3. Connect the print button to the button-click event handler. This is done in the ready member of the members parameter to the WinJS.UI.Pages.define function that is called to create the screen, so that the assignment occurs after the screen has loaded completely.

    document.getElementById("Print").addEventListener("click", PrintButtonHandler, false);

  4. Build and test your app as described previously.

Windows Store app printing sample

Quickstart: Printing from your app

Best Practices for developing print-capable Windows Store apps