So wird’s gemacht: Drucken mithilfe einer App-internen Druckschaltfläche (HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

In diesem Lernprogramm wird gezeigt, wie Sie Ihrer Windows Store-App eine Druckschaltfläche hinzufügen.

Standardmäßig drucken Benutzer in einer App, indem sie mithilfe des Charms "Geräte" einen Drucker auswählen. Sie können Benutzern das Starten eines Druckauftrags in der Benutzeroberfläche Ihrer App ermöglichen, indem Sie ShowPrintUIAsync aufrufen, wenn der Benutzer auf eine Schaltfläche klickt.

Roadmap: Wie hängt dieses Thema mit anderen zusammen? Informationen finden Sie unter:

Roadmap für Windows Store-Apps mit JavaScript

Wissenswertes

Technologien

Windows-Runtime

Voraussetzungen

Sie müssen mit HTML, JavaScript, Windows-Ereignissen und Ereignishandling vertraut sein.
Microsoft Visual Studio muss installiert sein.
Ein Drucker muss installiert sein.
Sie benötigen eine Windows Store-App, der Sie eine Druckschaltfläche hinzufügen möchten. Falls Sie keine eigene App haben, können Sie die PrintSample-Beispiel-App herunterladen und verwenden.
Ihre App muss grundlegende Windows-Druckfunktionen unterstützen. Falls dies nicht der Fall ist, können Sie unter Schnellstart: Drucken in der App nachlesen, wie Sie Ihrer App Unterstützung für grundlegende Windows-Druckfunktionen hinzufügen.

Anweisungen

Schritt 1: Öffnen der App in Visual Studio

Das in diesem Lernprogramm beschriebene Verfahren bezieht sich auf die PrintSampleJS-App aus der Print Sample-Beispiel-App. Wenn Sie Ihrer eigenen App eine Druckschaltfläche hinzufügen, öffnen Sie anstelle der PrintSample-Beispiel-App Ihre App in Visual Studio.

Öffnen Sie die PrintSample-Beispiel-App, und laden Sie das JavaScript-Beispiel auf Ihren Computer herunter.
Klicken Sie in Visual Studio auf File > Open Project, und navigieren Sie zu dem Ordner, der die Projektmappendatei der im vorhergehenden Schritt heruntergeladenen Beispiel-App enthält.
Wählen Sie die Projektmappendatei PrintSampleJS aus, und klicken Sie auf Öffnen.

Schritt 2: Erstellen und Testen der App

Klicken Sie auf Erstellen > Projektmappe erstellen, um die App zu erstellen. Stellen Sie sicher, dass unten auf dem Bildschirm keine Fehlermeldungen im Ausgabebereich angezeigt werden.
Klicken Sie auf Debuggen > Starten ohne Debugging.
Vergewissern Sie sich, dass nach einigen Sekunden die App Print JS Sample angezeigt wird.
Wenn die App ohne Fehler ausgeführt wird, kehren Sie zu Visual Studio zurück, und klicken Sie auf Debuggen > Debugging beenden.

Schritt 3: Definieren der beim Drucken zu verwendenden Formatvorlagen

Um den App-Bildschirm zum Drucken zu formatieren, erstellen Sie ein Cascading Stylesheet (CSS), das die beim Drucken geänderten Formatvorlagen definiert.

Definieren Sie diese Formatvorlagen als display: none, um zu verhindern, dass bestimmte Bereiche der Anzeige in der Druckausgabe erscheinen (z. B. die Druckschaltfläche, die Sie in diesem Lernprogramm hinzufügen).

Definieren Sie die beim Drucken zu verwendenden Formatvorlagen. Dies ist z. B. die Datei print.css, mit der die beim Drucken verwendeten Formatvorlagen in der PrintSample-Beispiel-App definiert werden.
```
#rootGrid
{
    width: 100%;
    height: 100%;
    display: block;
}

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

.article
{
    border:none;
}
```
Fügen Sie dem head-Tag der HTML-Datei für den Bildschirm mit der Druckschaltfläche den folgenden Code hinzu, um die Formatvorlage Ihrer App hinzuzufügen. Fügen Sie das media="print"-Attribut hinzu, um sicherzustellen, dass diese Formatvorlage nur angewendet wird, wenn der Bildschirm gedruckt wird.
```
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
```

Schritt 4: Hinzufügen der Druckschaltfläche

In diesem Schritt fügen Sie dem Bildschirm die Druckschaltfläche hinzu und erstellen den Click-Ereignishandler für die Druckschaltfläche.

Fügen Sie die Schaltfläche an der gewünschten Stelle auf dem App-Bildschirm hinzu. Stellen Sie sicher, dass sie den zu druckenden Inhalt nicht verdeckt oder anderweitig stört.

Dieses Beispiel stammt aus der Datei scenario2.html der PrintSample-Beispiel-App.
```
<button id="Print">Print</button>
```
Fügen Sie den Druckschaltflächen-Ereignishandler dem JavaScript-Code der App hinzu.

Dieses Beispiel aus der Datei scenario2.js der PrintSample-Beispiel-App fügt auch Funktionen hinzu, die vor und nach dem Druckauftrag von der Windows-Druckfunktion aufgerufen werden. Diese Funktionen sind zwar in der PrintSample-Beispiel-App definiert, werden aber nicht verwendet. Die Funktionen können aber für die Vor- und Nachbearbeitung des gedruckten Inhalts verwendet werden.
```
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();
}
```
Verbinden Sie die Druckschaltfläche mit dem ButtonClick-Ereignishandler. Hierzu wird der ready-Member des members-Parameters der WinJS.UI.Pages.define-Funktion verwendet, die zum Erstellen des Bildschirms aufgerufen wird. Die Zuweisung findet also statt, nachdem der Bildschirm vollständig geladen wurde.
```
document.getElementById("Print").addEventListener("click", PrintButtonHandler, false);
```
Erstellen und testen Sie Ihre App wie oben beschrieben.