Compartilhar via


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

[ 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 Guia de Início Rápido mostra a maneira mais simples de adicionar a funcionalidade de impressão ao seu aplicativo da Windows Store.

Assista a este vídeo rápido para ter uma visão geral do processo.

A maneira mais simples de imprimir a partir do seu aplicativo da Windows Store é usar a impressão básica do Windows. Para isso, o seu aplicativo precisa:

  • Registrar-se para o contrato do botão Imprimir em cada tela do aplicativo a partir da qual você quer permitir que os usuários imprimam.

    Registrar-se para o contrato do botão Imprimir significa obter um objeto PrintManager, criar um objeto PrintTask e manipular os eventos de impressão.

  • Fornecer conteúdo formatado para impressão.

    A experiência de impressão padrão apresentada neste Guia de início rápido é o Windows imprimir a exibição em tela do seu aplicativo.

    Observação  Recursos de impressão personalizados, como impressão de páginas específicas ou configurações de impressão personalizadas, só podem ser adicionados a aplicativos da Windows Store em C++, C# ou Visual Basic e XAML. Para obter mais informações sobre a adição de recursos de impressão personalizada para seu aplicativo, veja Imprimindo (XAML).

     

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 ao qual você quer adicionar impressão. Se você não tem o seu próprio aplicativo, pode baixar e usar o aplicativo de amostra PrintSample.Observação  Os exemplos apresentados neste guia de início rápido podem ser encontrados no aplicativo de amostra Print Sample.  

Instruções

1. Abrir o código-fonte do aplicativo para edição

Este procedimento descreve como abrir o aplicativo PrintSampleJS a partir do aplicativo de amostra PrintSample. Se você estiver usando o seu próprio aplicativo, abra-o no Visual Studio e pule para a etapa seguinte.

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

2. Compilar e testar o aplicativo

  1. 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.
  2. Clique em Depurar > Iniciar sem Depuração.
  3. Verifique se, depois de alguns segundos, a tela exibe o aplicativo Amostra de Impressão JS.
  4. Se o aplicativo for executado sem erros, retorne ao Visual Studio e clique em Depurar > Parar Depuração.

3. Registrar-se para impressão do Windows

Neste ponto, você deve ter um aplicativo que apresenta uma tela com conteúdo.

A primeira etapa para adicionar impressão ao seu aplicativo é registrar-se para o contrato do botão Imprimir. Seu aplicativo deve fazer isso em cada tela na qual você quer que o seu cliente seja capaz de imprimir.

Observação  Apenas a tela exibida para o usuário pode ser registrada para impressão. Se uma tela do seu aplicativo estiver registrada para impressão, será necessário que ela cancele esse registro ao ser encerrada. Se ela for substituída por outra tela, esta deverá se registrar para um novo contrato do botão Imprimir quando for aberta.

 

Registrar-se para o contrato do botão Imprimir significa obter um objeto PrintManager e definir o manipulador para o evento PrintTaskRequested.

  1. Para cada tela do aplicativo a partir da qual você quer imprimir, adicione o seguinte código, para que ele seja executado quando a tela for aberta. No aplicativo de amostra PrintSampleJS, isso é feito no membro ready do parâmetro members para a função WinJS.UI.Pages.define que é chamada para criar a tela.

    var printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView();
    printManager.onprinttaskrequested = onPrintTaskRequested;
    

    Observação  Você pode incluir esse código em uma função separada, como no caso do aplicativo de amostra PrintSampleJS.

     

  2. Adicione o manipulador de eventos print-task para essa tela. Cada tela do seu aplicativo pode precisar de uma função diferente se, por exemplo, o conteúdo de cada uma precisar ter uma formatação diferente para impressão.

    Este aplicativo PrintSampleJS inclui um manipulador de conclusão, que é mostrado aqui. É uma boa ideia lidar com eventos de conclusão, pois o seu aplicativo pode informar o usuário se um erro tiver ocorrido e fornecer as possíveis soluções. Da mesma maneira, seu aplicativo pode usar o evento de conclusão para indicar etapas subsequentes que o usuário deve realizar após a conclusão bem-sucedida do trabalho de impressão.

    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");
        }
    }
    
  3. Compile e teste o aplicativo, conforme descrito anteriormente.

4. Imprimindo a partir do seu aplicativo

Depois de modificar e compilar seu aplicativo, teste a nova funcionalidade no depurador.

  1. Clique em Depurar > Iniciar Depuração.
  2. Verifique se, depois de alguns segundos, a tela exibe o aplicativo Amostra de Impressão JS.
  3. Passe o dedo a partir do lado direito da tela para exibir os botões.
  4. Selecione o botão Dispositivos.
  5. Selecione uma impressora. A janela Imprimir será exibida.
  6. Clique no botão Imprimir na janela de impressão para imprimir o conteúdo da tela atual.
  7. Confira o resultado impresso.

Resumo e próximas etapas

Neste Guia de início rápido, você adicionou a impressão do Windows ao seu aplicativo, sem modificar a maneira como os usuários interagem com o aplicativo ou como o aplicativo formata seu conteúdo para impressão.

A partir daqui, você pode explorar algumas funções de impressão mais avançadas. Em Como imprimir usando um botão de impressão dentro do aplicativo, você adicionará um botão de impressão no qual o usuário pode clicar para imprimir a partir do seu aplicativo da Widows Store.

Observação  

Você pode usar a função JavaScript window.print() para imprimir o conteúdo do seu aplicativo, mas window.print() foi projetada para a impressão do conteúdo exibido na tela usando a experiência de impressão padrão. Como uma tela de aplicativo da Windows Store nem sempre gera uma boa saída impressa, chamar window.print() talvez não seja a melhor abordagem. Para obter a melhor experiência do cliente, recomendamos que você use as funções de Tempo de Execução do Windows e se registre para o contrato do botão Imprimir, conforme demonstrado nestes tópicos.

 

E, para conhecer mais cenários de impressão que estão disponíveis em aplicativos da Windows Store, consulte o aplicativo de amostra PrintSample.

Tópicos relacionados

Aplicativo de amostra PrintSample

Práticas recomendadas para desenvolver aplicativos da Windows Store com capacidade de impressão

Desenvolvendo aplicativos de dispositivo da Windows Store para impressoras