Schnellstart: Drucken in der App (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 dieser Schnellstartanleitung wird gezeigt, wie Sie einer Windows Store-App am einfachsten Druckfunktionen hinzufügen können.

Dieses kurze Video enthält einen Überblick über diesen Vorgang.

Die Verwendung der Windows-Druckfunktionen ist die einfachste Methode, um in einer Windows Store-App zu drucken. Dazu muss Ihre App:

Für den Vertrag für "Drucken" registriert werden, und zwar in jeder Anzeige der App, in der Sie Benutzern das Drucken ermöglichen möchten.

Durch die Registrierung für den Vertrag für "Drucken" wird ein PrintManager-Objekt abgerufen und ein PrintTask-Objekt erstellt, und die Druckereignisse werden behandelt.
Formatierten Inhalt zum Drucken bereitstellen.

Die in dieser Schnellstartanleitung gezeigte Standarddruckoberfläche für Windows dient zum Drucken des Bildschirminhalts Ihrer App.

Hinweis Benutzerdefinierte Druckfeatures wie das Drucken bestimmter Seiten oder benutzerdefinierte Druckeinstellungen können Windows Store-Apps nur mithilfe von C++, C# oder Visual Basic und XAML hinzugefügt werden. Weitere Informationen zum Hinzufügen benutzerdefinierter Druckfeatures zu einer App finden Sie unter Drucken (XAML).

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 App, der Sie eine Druckfunktion hinzufügen möchten. Falls Sie keine eigene App haben, können Sie die Print Sample-Beispiel-App herunterladen und verwenden.Hinweis Die Beispiele in dieser Schnellstartanleitung befinden sich in der PrintSample-Beispiel-App.

Anweisungen

1. Öffnen des App-Quellcodes zur Bearbeitung

In diesem Verfahren wird beschrieben, wie Sie die App PrintSampleJS der Print Sample-Beispiel-App öffnen. Falls Sie Ihre eigene App verwenden, öffnen Sie sie in Visual Studio, und fahren dann mit dem nächsten Schritt fort.

Öffnen Sie die Print Sample-Beispiel-App, und laden Sie das JavaScript-Beispiel auf Ihren PC 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.
Markieren Sie die Projektmappendatei PrintSampleJS, und klicken Sie auf Öffnen.

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.

3. Registrieren für Windows-Druckfunktionen

Sie sollten jetzt eine App haben, die einen Bildschirm mit Inhalt anzeigt.

Um Ihrer App Druckfunktionen hinzuzufügen, müssen Sie sie als Erstes für den Vertrag für "Drucken" registrieren. Die Registrierung ist für jeden Bildschirm erforderlich, auf dem der Benutzer drucken können soll.

Hinweis Es kann jeweils nur der Bildschirm, der gerade angezeigt wird, für das Drucken registriert werden. Wenn ein Bildschirm Ihrer App für das Drucken registriert wurde, muss die Registrierung beim Schließen des Bildschirms aufgehoben werden. Wird an seiner Stelle ein anderer Bildschirm angezeigt, muss dieser nächste Bildschirm beim Öffnen für einen neuen Vertrag für "Drucken" registriert werden.

Durch die Registrierung für den Vertrag für "Drucken" wird ein PrintManager-Objekt abgerufen und der Handler für das PrintTaskRequested-Ereignis definiert.

Fügen Sie jedem Bildschirm Ihrer App, über den Sie drucken möchten, den folgenden Code hinzu, sodass er beim Öffnen des Bildschirms ausgeführt wird. In der Beispiel-App PrintSampleJS wird der Code im ready-Member des members-Parameters für die WinJS.UI.Pages.define-Funktion hinzugefügt, die zum Erstellen des Bildschirms aufgerufen wird.
```
var printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView();
printManager.onprinttaskrequested = onPrintTaskRequested;
```
Hinweis Sie können diesen Code wie in der Beispiel-App PrintSampleJS in einer separaten Funktion hinzufügen.
Fügen Sie den Druckaufgaben-Ereignishandler für den Bildschirm hinzu. Wenn die Inhalte der verschiedenen Bildschirme Ihrer App z. B. zum Drucken unterschiedlich formatiert werden müssen, benötigen Sie möglicherweise für jeden Bildschirm der App eine andere Funktion.

Die App PrintSampleJS enthält einen Abschlusshandler, den Sie hier sehen. Es empfiehlt sich, Abschlussereignisse zu behandeln, da die App den Benutzer dann über aufgetretene Fehler und mögliche Lösungen informieren kann. Die App kann das Abschlussereignis auch verwenden, um nachfolgende Schritte anzugeben, die der Benutzer nach einem erfolgreichen Druckauftrag ausführen kann.
```
function onPrintTaskRequested(printEvent) {
    var printTask = printEvent.request.createPrintTask("Print Sample", function (args) {
        args.setSource(MSApp.getHtmlPrintDocumentSource(document));

        // Register the handler for print task completion event
        printTask.oncompleted = onPrintTaskCompleted;
    });
}
```
```
function onPrintTaskCompleted(printTaskCompletionEvent) {
    // Notify the user about the failure
    if (printTaskCompletionEvent.completion === Windows.Graphics.Printing.PrintTaskCompletion.failed) {
        WinJS.log && WinJS.log("Failed to print.", "sample", "error");
    }
}
```
Erstellen und testen Sie die App wie bereits beschrieben.

4. Drucken von der App aus

Nachdem Sie Ihre App geändert und erstellt haben, testen Sie die neue Funktion im Debugger.

Klicken Sie auf Debuggen > Debuggen starten.
Vergewissern Sie sich, dass nach einigen Sekunden die App Print JS Sample angezeigt wird.
Führen Sie eine Streifbewegung vom rechten Rand des Bildschirms aus, um die Charms einzublenden.
Wählen Sie den Charm "Geräte" aus.
Wählen Sie einen Drucker aus. Das Fenster "Drucken" sollte geöffnet werden.
Klicken Sie im Druckfenster auf die Schaltfläche Drucken, um den aktuellen Bildschirminhalt zu drucken.
Überprüfen Sie das Druckergebnis.

Zusammenfassung und nächste Schritte

In dieser Schnellstartanleitung haben Sie Ihrer App eine Windows-Druckfunktion hinzugefügt, ohne die Art und Weise zu ändern, wie Benutzer mit der App interagieren oder die App den Inhalt für den Druck formatiert.

Jetzt können Sie sich mit einigen erweiterten Druckfunktionen befassen. In So wird's gemacht: Drucken mithilfe einer App-internen Druckschaltfläche fügen Sie eine Druckschaltfläche hinzu, auf die Benutzer klicken können, um aus der Windows Store-App zu drucken.

Hinweis

Mit der JavaScript-Funktion window.print() können Sie den Inhalt der App drucken. window.print() dient aber dazu, den auf dem Bildschirm angezeigten Inhalt mithilfe der Standarddruckoberfläche zu drucken. Da der Bildschirm einer Windows Store-App nicht immer gut gedruckt werden kann, ist der Aufruf von window.print() nicht die beste Herangehensweise. Maximale Benutzerfreundlichkeit erzielen Sie, indem Sie die Funktionen der Windows-Runtime verwenden und die App wie in diesen Themen erläutert für den Vertrag für "Drucken" registrieren.

Weitere Druckszenarien für Windows Store-Apps finden Sie in der PrintSample-Beispiel-App.