Comment imprimer à l’aide d’un bouton intégré à l’application (HTML)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Ce didacticiel montre comment ajouter un bouton d’impression à votre application du Windows Store.

Par défaut, un utilisateur effectue des impressions à partir d’une application et doit pour cela sélectionner un périphérique d’impression à partir de l’icône Périphériques. Vous pouvez autoriser l’utilisateur à lancer un travail d’impression depuis l’interface utilisateur de votre application en appelant la méthode ShowPrintUIAsync lorsque l’utilisateur clique sur un bouton.

Feuille de route : comment cette rubrique s’articule-t-elle par rapport aux autres ? Voir :

Feuille de route pour les applications du Windows Store en JavaScript

Ce que vous devez savoir

Technologies

Windows Runtime

Prérequis

Vous devez vous familiariser avec le code HTML, le langage JavaScript, les événements Windows et la gestion des événements.
Vous avez installé Microsoft Visual Studio.
Vous avez installé une imprimante.
Vous devez disposer d’une application du Windows Store à laquelle vous voulez ajouter un bouton d’impression. Si vous ne disposez pas de votre propre application, vous pouvez télécharger l’exemple d’application Exemple d’impression et utiliser cette application.
Votre application doit prendre en charge l’impression Windows de base. Si ce n’est pas le cas, voir la rubrique Démarrage rapide : impression à partir de votre application pour découvrir comment ajouter la prise en charge de l’impression Windows de base à votre application.

Instructions

Étape 1: Ouvrir votre application dans Visual Studio

La procédure décrite dans ce didacticiel fait référence à l’application PrintSampleJS de l’exemple d’application Exemple d’impression. Si vous ajoutez un bouton d’impression à votre propre application, ouvrez cette dernière dans Visual Studio à la place de l’exemple d’application Exemple d’impression.

Ouvrez l’exemple d’application Exemple d’impression et téléchargez l’exemple en JavaScript sur votre ordinateur.
Dans Visual Studio, cliquez sur File > Open Project et accédez au dossier contenant le fichier solution de l’exemple d’application que vous avez téléchargé à l’étape précédente.
Sélectionnez le fichier solution PrintSampleJS, puis cliquez sur Ouvrir.

Étape 2: Générer et tester l’application

Cliquez sur Générer > Générer la solution pour générer l’application sur laquelle vous travaillez. Assurez-vous qu’il n’y a aucun message d’erreur dans le volet Sortie en bas de l’écran.
Cliquez sur Déboguer > Exécuter sans débogage.
Après quelques secondes, vérifiez que l’application Print JS Sample apparaît à l’écran.
Si l’application s’exécute sans erreur, revenez à Visual Studio, puis cliquez sur Déboguer > Arrêter le débogage.

Étape 3: Définir les styles à utiliser lors de l’impression

Pour mettre en forme l’écran de l’application pour l’impression, créez une feuille de style en cascade (CSS) qui définit les styles qui changent lors de l’impression.

Pour ne pas faire apparaître certaines sections de l’écran dans la sortie imprimée—par exemple le bouton d’impression que vous allez ajouter dans le cadre de ce didacticiel—définissez ces styles comme suit : display: none.

Définissez les styles à utiliser lors de l’impression. Par exemple, voici le fichier print.css que l’exemple d’application Exemple d’impression inclut pour définir les styles utilisés par l’exemple d’application au moment de l’impression.
```
#rootGrid
{
    width: 100%;
    height: 100%;
    display: block;
}

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

.article
{
    border:none;
}
```
Pour inclure la feuille de style dans votre application, ajoutez le code suivant à la balise head du fichier HTML pour l’écran où figure le bouton d’impression. Pour faire en sorte que cette feuille de style ne soit appliquée que lorsque l’écran est imprimé, veillez à inclure l’attribut media="print".
```
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
```

Étape 4: Ajouter le bouton d’impression

Au cours de cette étape, vous allez ajouter le bouton d’impression à l’écran et créer le gestionnaire d’événements Click pour le bouton d’impression.

Ajoutez le bouton à l’écran de votre application à l’endroit désiré. Assurez-vous qu’il ne perturbe pas le contenu que vous voulez imprimer.

Cet exemple est issu du scénario scenario2.html de l’exemple d’application Exemple d’impression.
```
<button id="Print">Print</button>
```
Ajoutez le gestionnaire d’événements du bouton d’impression au code JavaScript de votre application.

Cet exemple, tiré du scénario scenario2.js de l’exemple d’application Exemple d’impression, ajoute également les fonctions qui seront appelées par l’impression Windows avant et après le travail d’impression. Celles-ci sont définies mais ne sont pas utilisées dans l’exemple d’application Exemple d’impression ; toutefois, elles peuvent être utilisées à des fins de prétraitement ou de post-traitement du contenu imprimé.
```
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();
}
```
Connectez le bouton d’impression au gestionnaire d’événements ClickButton. Cette opération est effectuée dans le membre ready du paramètre members pour la fonction WinJS.UI.Pages.define qui est appelée pour créer l’écran. De cette façon, l’attribution se produit une fois l’écran complètement chargé.
```
document.getElementById("Print").addEventListener("click", PrintButtonHandler, false);
```
Générez et testez votre application comme décrit précédemment.

Rubriques associées

Exemple d’impression d’application du Windows Store

Démarrage rapide : impression à partir de votre application

Meilleures pratiques pour le développement d’applications du Windows Store offrant des fonctionnalités d’impression

Partager via