Come stampare utilizzando un pulsante di stampa in-app (HTML)

Articolo
12/11/2015

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Questa guida introduttiva illustra come aggiungere un pulsante di stampa a un'app di Windows Store.

Per impostazione predefinita, un utente stampa da un'app selezionando un dispositivo di stampa tramite il pulsante di accesso rapido Dispositivi. Puoi consentire all'utente di avviare un processo di stampa dall'interfaccia utente dell'app chiamando il metodo ShowPrintUIAsync quando l'utente fa clic su un pulsante.

Roadmap: che relazione c'è tra questo argomento e gli altri? Vedi:

Roadmap per app di Windows Store scritte in JavaScript

Cosa sapere

Tecnologie

Windows Runtime

Prerequisiti

Devi avere familiarità con il linguaggio HTML, JavaScript, gli eventi di Windows e la gestione di eventi.
Deve essere installato Microsoft Visual Studio.
Deve essere installata una stampante.
Devi avere un'app di Windows Store a cui aggiungere un pulsante di stampa. Se non disponi di un'app, puoi scaricare e usare l'app di esempio per la stampa.
L'app deve supportare le funzionalità di stampa di base di Windows. In caso contrario, vedi Guida introduttiva: Stampa dall'app per scoprire come aggiungere il supporto delle funzionalità di stampa di base di Windows alla tua app.

Istruzioni

Passaggio 1: Aprire l'app in Visual Studio

La procedura descritta in questa esercitazione fa riferimento all'app PrintSampleJS tratta dall'app di esempio PrintSample. Se vuoi aggiungere un pulsante di stampa alla tua app, aprila in Visual Studio invece di aprire l'app di esempio PrintSample.

Apri l'app di esempio per la stampa e scarica l'esempio in JavaScript nel computer.
In Visual Studio fai clic su File > Open Project e passa alla cartella contenente il file della soluzione per l'app di esempio scaricato nel passaggio precedente.
Seleziona il file della soluzione PrintSampleJS e fai clic su Apri.

Passaggio 2: Compila l'app ed eseguine il test

Fai clic su Compila > Compila soluzione per compilare l'app su cui stai lavorando. Assicurati che non ci siano messaggi di errore nel riquadro Output in fondo allo schermo.
Fai clic su Debug > Avvia senza debug.
Verifica che dopo alcuni secondi sullo schermo venga visualizzata l'app esempio di stampa JS.
Se l'app viene eseguita senza errori, torna a Visual Studio e fai clic su Debug > Termina debug.

Passaggio 3: Definisci gli stili da usare per la stampa

Per formattare la schermata dell'app per la stampa, crea un foglio di stile CSS (Cascading Style Sheet) che definisce gli stili che cambiano durante la stampa.

Per impedire la visualizzazione di parti dello schermo nell'output stampato—ad esempio il pulsante di stampa che aggiungerai in questa esercitazione—definisci questi stili come display: none.

Definisci gli stili da usare per la stampa. Ad esempio, questo è il file print.css incluso nell'app di esempio di stampa per definire gli stili usati dall'app di esempio durante la stampa.
```
#rootGrid
{
    width: 100%;
    height: 100%;
    display: block;
}

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

.article
{
    border:none;
}
```
Includi il foglio di stile nella tua app aggiungendo il codice seguente al tag head del file HTML per la schermata con il pulsante di stampa. Per assicurarti che questo foglio di stile venga applicato solo quando la schermata viene stampata, includi l'attributo media="print".
```
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
```

Passaggio 4: Aggiungi il pulsante di stampa

In questo passaggio aggiungerai il pulsante di stampa alla schermata e creerai il gestore dell'evento Click per questo pulsante.

Aggiungi il pulsante nel punto della schermata dell'app in cui vuoi che venga visualizzato. Assicurati che non interferisca con il contenuto che desideri stampare.

Questo esempio si trova in scenario2.html nell'app di esempio di stampa.
```
<button id="Print">Print</button>
```
Aggiungi il gestore dell'evento del pulsante di stampa al codice JavaScript dell'app.

Questo esempio, che si trova in scenario2.js nell'app di esempio di stampa, aggiunge anche le funzioni che verranno chiamate da Windows prima e dopo il processo di stampa. Queste funzioni sono definite ma non usate nell'app di esempio di stampa, ma possono essere usate per la pre-elaborazione o la post-elaborazione del contenuto stampato.
```
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();
}
```
Collega il pulsante di stampa al gestore dell'evento Click. Questa operazione viene eseguita nel membro ready del parametro members della funzione WinJS.UI.Pages.define chiamata per creare la schermata, per cui l'assegnazione si verifica dopo il caricamento della schermata.
```
document.getElementById("Print").addEventListener("click", PrintButtonHandler, false);
```
Compila la tua app ed eseguine il test come descritto in precedenza.

Argomenti correlati

Esempio di stampa in un'app di Windows Store

Guida introduttiva: Stampa dall'app.

Procedure consigliate per lo sviluppo di app di Windows Store che supportano la stampa