Cómo imprimir usando un botón de impresión en la aplicación (HTML)

Artículo
12/12/2015

[ 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 tutorial muestra cómo agregar un botón de impresión a tu aplicación de la Tienda Windows.

De forma predeterminada, un usuario imprime desde una aplicación seleccionando un dispositivo de impresión en el acceso a Dispositivos. Puedes dejar que el usuario inicie un trabajo de impresión desde la interfaz de usuario de tu aplicación llamando a ShowPrintUIAsync cuando el usuario hace clic en un botón.

Guía básica: Relación de este tema con los demás. Consulta:

Guía básica para crear aplicaciones de la Tienda Windows con JavaScript

Lo que debes saber

Tecnologías

Windows en tiempo de ejecución

Requisitos previos

Debes estar familiarizado con el control de eventos y eventos de Windows, JavaScript y HTML.
Debes tener instalado Microsoft Visual Studio.
Debes tener una impresora instalada.
Debes tener una aplicación de la Tienda Windows a la que desees agregar un botón de impresión. Si no tienes tu propia aplicación, puedes descargar la aplicación de muestra PrintSample para usarla.
Tu aplicación debe ser compatible con la impresión básica de Windows. Si no lo es, consulta Inicio rápido: imprimir desde tu aplicación para obtener información sobre cómo agregarle compatibilidad con impresión básica de Windows.

Instrucciones

Paso 1: Abre tu aplicación en Visual Studio.

El procedimiento descrito en este tutorial hace referencia a la aplicación PrintSampleJS del tema sobre la aplicación de muestra PrintSample. Si vas a agregar un botón de impresión a tu propia aplicación, ábrela en Visual Studio en lugar de abrir la aplicación de muestra PrintSample.

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

Paso 2: Compilar y probar la aplicación

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.
Haz clic en Depurar > Iniciar sin depurar.
Comprueba que, tras unos segundos, se muestre en pantalla la aplicación Print JS Sample.
Si la aplicación se ejecuta sin errores, vuelve a Visual Studio y haz clic en Depurar > Detener depuración.

Paso 3: Definir los estilos para usar al imprimir

Para dar formato a la pantalla de la aplicación para impresión, crea una hoja de estilos en cascada (CSS) que defina los estilos que cambian al imprimir.

Para evitar que algunas secciones de la pantalla aparezcan en el resultado impreso (por ejemplo, el botón de impresión que agregarás en este tutorial), define dichos estilos como display: none.

Define los estilos que se van a usar al imprimir. Por ejemplo, este es el archivo print.css que la aplicación de muestra PrintSample incluye para definir los estilos que usa al imprimir.
```
#rootGrid
{
    width: 100%;
    height: 100%;
    display: block;
}

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

.article
{
    border:none;
}
```
Incluye la hoja de estilos en tu aplicación agregando el siguiente código a la etiqueta head del archivo HTML, para la pantalla con el botón de impresión. Para asegurarte de que esta hoja de estilos se aplique solo al imprimir la pantalla, incluye el atributo media="print".
```
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
```

Paso 4: Agregar el botón de impresión

En este paso, agregarás el botón de impresión a la pantalla y crearás el controlador de eventos click para el botón de impresión.

Agrega el botón a la pantalla de tu aplicación en que te gustaría que aparezca. Asegúrate de que no interfiera con el contenido que deseas imprimir.

Este ejemplo se ha extraído de scenario2.html, de la aplicación de muestra PrintSample.
```
<button id="Print">Print</button>
```
Agrega el controlador de eventos del botón de impresión al código JavaScript de tu aplicación.

Este ejemplo, extraído de scenario2.js (de la aplicación de muestra PrintSample), también agrega funciones a las que llamará la impresión de Windows antes y después del trabajo de impresión. Dichas funciones se definen, pero no se usan en la aplicación de muestra PrintSample; con todo, podrían usarse para el procesamiento previo o posterior del contenido impreso.
```
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();
}
```
Conecta el botón de impresión con el controlador de eventos click. Esto se lleva a cabo en el miembro ready del parámetro members de la función WinJS.UI.Pages.define que se llama para crear la pantalla, de modo que la asignación ocurre después de que la pantalla se carga completamente.
```
document.getElementById("Print").addEventListener("click", PrintButtonHandler, false);
```
Compila y prueba tu aplicación como se especificó anteriormente.

Temas relacionados

Muestra de impresión de aplicación de la Tienda Windows

Inicio rápido: imprimir desde tu aplicación

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

Compartir a través de