Inicio rápido: imprimir desde tu aplicación (HTML)

  • Artículo

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Este inicio rápido muestra la forma más sencilla de agregar funcionalidad de impresión a tu aplicación de la Tienda Windows.

Mira este breve vídeo para ver una descripción general del proceso.

La forma más sencilla de imprimir desde tu aplicación de la Tienda Windows es usar la impresión de Windows. Para ello, tu aplicación debe:

  • Registrarse en el contrato de Imprimir en cada una de las presentaciones de la aplicación desde las cuales quieres que los usuarios puedan imprimir.

    Registrarse en el contrato de Imprimir significa obtener un objeto PrintManager, creando un objeto PrintTask y manipulando los eventos de impresión.

  • Proporcionar contenido con formato para imprimir.

    La experiencia de impresión predeterminada que se muestra en este inicio rápido consiste en que Windows imprime la presentación en pantalla de tu aplicación.

    Nota  Solo puedes agregar a las aplicaciones de la Tienda Windows características de impresión personalizadas, como la impresión de páginas específicas, u opciones de impresión usando C++, C# o Visual Basic y XAML. Para obtener más información sobre las características de impresión personalizadas, consulta Imprimir (XAML).

     

Requisitos previos

  • Debes estar familiarizado con el control de eventos, los eventos de Windows, JavaScript y HTML.
  • Debes tener instalado Microsoft Visual Studio.
  • Debes tener una impresora instalada.
  • Debes tener una aplicación a la que desees agregar funciones de impresión. Si no tienes tu propia aplicación, puedes descargar la aplicación de muestra PrintSample para usarla.Nota  Los ejemplos de este inicio rápido se encuentran en la aplicación de muestra PrintSample.  

Instrucciones

1. Abrir el código fuente de la aplicación para su edición

En este procedimiento se describe cómo abrir la aplicación PrintSampleJS del tema sobre la aplicación de muestra PrintSample. Si vas a usar tu propia aplicación, ábrela en Visual Studio y continúa con el paso siguiente.

  1. Abre la aplicación de muestra PrintSample y descarga el ejemplo de JavaScript en tu equipo.
  2. En Visual Studio, haz clic en File > Open Project y navega a la carpeta que contiene el archivo de solución de la aplicación de muestra que descargaste en el paso anterior.
  3. Selecciona el archivo de solución PrintSampleJS y haz clic en Abrir.

2. Compilar y probar la aplicación

  1. Haz clic en Compilar > Compilar solución para compilar la aplicación en la que estás trabajando. Asegúrate de que no haya mensajes de error en el panel Salida en la parte inferior de la pantalla.
  2. Haz clic en Depurar > Iniciar sin depurar.
  3. Comprueba que, tras unos segundos, se muestre en pantalla la aplicación Print JS Sample.
  4. Si la aplicación se ejecuta sin errores, vuelve a Visual Studio y haz clic en Depurar > Detener depuración.

3. Registro para impresión de Windows

En este punto, deberías tener una aplicación que muestre algún contenido en la pantalla.

El primer paso para agregar impresión a tu aplicación es registrarte en el contrato de Imprimir. Tu aplicación debe realizar esta acción en cada pantalla desde la que desees que el cliente pueda imprimir.

Nota  Solo puedes registrar para impresión la pantalla que se muestra al usuario. Si una pantalla de tu aplicación se registró para impresión, debe anular su registro cuando salga. Si se la reemplaza con otra pantalla, la siguiente pantalla debe registrarse para un nuevo contrato de Imprimir al abrirse.

 

Registrarse en el contrato de Imprimir significa obtener un objeto PrintManager y definir el controlador para el evento PrintTaskRequested.

  1. Agrega a cada pantalla de la aplicación desde la que desees imprimir el siguiente código, para que se ejecute al abrir la pantalla. En la aplicación de muestra PrintSampleJS, esto se lleva a cabo en el miembro ready del parámetro members de la función WinJS.UI.Pages.define a la que se llama para crear la pantalla.

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

    Nota  Puedes incluir este código en una función independiente, como lo hace la aplicación de muestra PrintSampleJS.

     

  2. Agrega el controlador de eventos print-task de esa pantalla. Cada pantalla de tu aplicación podría necesitar una función diferente si, por ejemplo, el contenido de cada una debiera tener un formato distinto para impresión.

    Esta aplicación PrintSampleJS incluye un controlador de finalización, que se muestra a continuación. Es recomendable controlar los eventos de finalización, ya que luego tu aplicación puede informar al usuario si ocurrió un error y proporcionar posibles soluciones. De la misma manera, tu aplicación podría usar el evento de finalización para indicar los pasos subsiguientes que el usuario debe seguir después de que el trabajo de impresión sea correcto.

    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. Compila y prueba la aplicación como se especificó anteriormente.

4. Imprimir desde tu aplicación

Una vez que modificas y compilas tu aplicación, prueba las nuevas funciones en el depurador.

  1. Haz clic en Depurar > Iniciar depuración.
  2. Comprueba que, tras unos segundos, se muestre en pantalla la aplicación Print JS Sample.
  3. Haz el gesto de deslizar rápidamente desde el lado derecho para mostrar los accesos.
  4. Selecciona el acceso a Dispositivos.
  5. Selecciona una impresora. Debe aparecer la ventana de impresión.
  6. Haz clic en el botón Imprimir en la ventana de impresión para imprimir el contenido de la pantalla actual.
  7. Revisa el resultado de la impresión.

Resumen y siguientes pasos

En este inicio rápido, agregaste impresión de Windows a tu aplicación, sin modificar el modo en que los usuarios interactúan con tu aplicación o el modo en que tu aplicación da formato al contenido para impresión.

Desde aquí, puedes explorar algunas funciones de impresión más avanzadas. En el tema sobre cómo imprimir con un botón de impresión en la aplicación, agregarás un botón de impresión en el que el usuario puede hacer clic para imprimir desde tu aplicación de la Tienda Windows.

Nota  

Puedes usar la función de JavaScript window.print() para imprimir el contenido de tu aplicación, pero window.print() está diseñada para imprimir el contenido que se muestra en pantalla, mediante la experiencia de impresión predeterminada. Debido a que las pantallas de las aplicaciones de la Tienda Windows no siempre producen buenos resultados de impresión, es posible que llamar a window.print() no sea el mejor método. Para obtener una mejor experiencia de usuario, recomendamos usar las funciones de Windows en tiempo de ejecución y registrarse en el contrato de Imprimir, como se muestra en estos temas.

 

Si también quieres obtener otros escenarios de impresión disponibles para aplicaciones de la Tienda Windows, consulta la aplicación de muestra PrintSample.

Temas relacionados

Aplicación de muestra PrintSample

Procedimientos recomendados para el desarrollo de aplicaciones de la Tienda Windows con funcionalidad de impresión

Desarrollo de aplicaciones para dispositivo de la Tienda Windows para impresoras