Como imprimir usando um botão de impressão do aplicativo (HTML)

Artigo
12/12/2015

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Este tutorial mostra como adicionar um botão de impressão ao seu aplicativo da Windows Store.

Por padrão, o usuário imprime a partir de um aplicativo selecionando um dispositivo de impressão no botão Dispositivos. Você pode permitir que o usuário inicie um trabalho de impressão na interface do usuário para visualização da impressão chamando o método ShowPrintUIAsync quando esse usuário clicar em um botão.

Mapa: como este tópico está relacionado aos outros? Veja:

Mapa para aplicativos da Windows Store em JavaScript

O que você precisa saber

Tecnologias

Tempo de Execução do Windows

Pré-requisitos

Você precisa ter familiaridade com HTML, JavaScript, eventos do Windows e manipulação de eventos.
É necessário ter o Microsoft Visual Studio instalado.
É necessário ter uma impressora instalada.
É necessário ter um aplicativo da Windows Store ao qual você queira adicionar um botão de impressão. Se você não tem o seu próprio aplicativo, pode baixar e usar o aplicativo de amostra PrintSample.
Seu aplicativo deve dar suporte à impressão básica do Windows. Se esse não for o caso, confira o Guia de início rápido: imprimindo a partir do seu aplicativo para saber como adicionar o suporte para impressão básica do Windows ao seu aplicativo.

Instruções

Etapa 1: Abrir o aplicativo no Visual Studio

O procedimento descrito neste tutorial refere-se ao aplicativo PrintSampleJS do aplicativo de amostra PrintSample. Se você estiver adicionando um botão de impressão para o seu próprio aplicativo, abra esse aplicativo no Visual Studio em vez do aplicativo de amostra PrintSample.

Abra o aplicativo de amostra PrintSample e baixe o exemplo para JavaScript no seu computador.
No Visual Studio, clique em File > Open Project e vá para a pasta que contém o arquivo de solução do aplicativo de amostra que você baixou na etapa anterior.
Selecione o arquivo de solução PrintSampleJS e clique em Abrir.

Etapa 2: Compilar e testar o aplicativo

Clique em Compilar > Compilar Solução para compilar o aplicativo no qual você está trabalhando. Verifique se não há mensagens de erro no painel Saída localizado na parte inferior da tela.
Clique em Depurar > Iniciar sem Depuração.
Verifique se, depois de alguns segundos, a tela exibe o aplicativo Amostra de Impressão JS.
Se o aplicativo for executado sem erros, retorne ao Visual Studio e clique em Depurar > Parar Depuração.

Etapa 3: Definir os estilos para uso durante a impressão

Para formatar a tela do aplicativo para impressão, crie uma CSS (folha de estilos em cascata) que defina os estilos que são modificados durante a impressão.

Para impedir que seções da tela apareçam na saída impressa—por exemplo, o botão de impressão que você irá adicionar neste tutorial—defina esses estilos como display: none.

Defina os estilos para uso durante a impressão. Por exemplo, este é o arquivo print.css que o aplicativo de amostra PrintSample inclui para definir os estilos usados pelo aplicativo de amostra durante a impressão.
```
#rootGrid
{
    width: 100%;
    height: 100%;
    display: block;
}

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

.article
{
    border:none;
}
```
Inclua a folha de estilos no seu aplicativo adicionando o seguinte código à marca head do arquivo HTML da tela com o botão de impressão. Para garantir que essa folha de estilos apenas seja aplicada quando a tela for impressa, lembre-se de incluir o atributo media="print".
```
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
```

Etapa 4: Adicionar o botão de impressão

Nesta etapa, você irá adicionar o botão de impressão à tela e criar o manipulador de eventos click para esse botão de impressão.

Adicione o botão no local da tela do aplicativo onde você quer que ele apareça. Verifique se ele não está interferindo no conteúdo que você quer imprimir.

Este exemplo foi extraído de scenario2.html do aplicativo de amostra PrintSample.
```
<button id="Print">Print</button>
```
Adicione o manipulador de eventos do botão de impressão ao código JavaScript do seu aplicativo.

Este exemplo, extraído de scenario2.js do aplicativo de amostra PrintSample, também adiciona funções que serão chamadas pela impressão do Windows antes e depois do trabalho de impressão. Essas funções são definidas, mas não são usadas, no aplicativo de amostra PrintSample. No entanto, elas poderiam ser usadas para o pré-processamento ou o pós-processamento do conteúdo impresso.
```
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();
}
```
Conecte o botão de impressão ao manipulador de eventos button-click. Isso é feito no membro ready do parâmetro members para a função WinJS.UI.Pages.define que é chamada para criar a tela e, portanto, a atribuição ocorre após o carregamento completo da tela.
```
document.getElementById("Print").addEventListener("click", PrintButtonHandler, false);
```
Compile e teste seu aplicativo, conforme descrito anteriormente.

Tópicos relacionados

Exemplo de impressão de aplicativo da Windows Store

Guia de início rápido: imprimindo a partir do seu aplicativo