Cómo cambiar las opciones estándar en la interfaz de usuario de vista previa de impresió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 personalizar las opciones de impresión que se muestran en la interfaz de usuario de vista previa de impresión.

En la interfaz de usuario de vista previa de impresión se muestran las siguientes opciones de manera predeterminada:

colorMode

copies

orientation

Además de los parámetros de configuración precedentes, Windows proporciona otras opciones de impresora comunes que puedes agregar a la interfaz de usuario de vista previa de impresión. Son las siguientes.

binding	collation	duplex	holePunch
inputBin	mediaSize	mediaType	nUp
printQuality	staple

Estas opciones se definen en la clase standardPrintTaskOptions. Puedes agregar o quitar opciones de la lista que se muestra en la interfaz de usuario de vista previa de impresión. También puedes cambiar el orden en que aparecen las opciones y establecer la configuración predeterminada que se muestra al usuario.

Pero los cambios que realices mediante este método afectan solo a la interfaz de usuario de vista previa de impresión. Los usuarios siempre pueden acceder a todas las opciones compatibles con la impresora haciendo clic en Más configuraciones en la interfaz de usuario de vista previa de impresión.

Aunque tu aplicación puede especificar las opciones de impresión que se van a mostrar, solo aparecerán en la interfaz de usuario de vista previa de impresión las que son compatibles con la impresora seleccionada. La interfaz no mostrará opciones que no sean compatibles con la impresora seleccionada.

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 ya 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 personalizar la interfaz de usuario de vista previa de impresión de 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 las opciones de impresión que se van a mostrar

Una vez que se carga la pantalla de la aplicación, se registra para el contrato de Imprimir. El registro incluye la definición del controlador de eventos PrintTaskRequested. El código para personalizar las opciones que aparecen en la interfaz de usuario de vista previa de impresión se agrega al controlador de eventos PrintTaskRequested.

Modifica el controlador de eventos PrintTaskRequested para que incluya las instrucciones de printTask.options para configurar los parámetros de impresión que deseas que aparezcan en la interfaz de usuario de vista previa de impresión.

Busca el controlador de eventos PrintTaskRequested en la aplicación. En la aplicación de muestra PrintSample, el controlador de eventos básico PrintTaskRequested tiene el mismo aspecto que el de este ejemplo.

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");
    }
}

Agrega las opciones de impresión que deseas mostrar en la interfaz de usuario de vista previa de impresión. Las opciones aparecerán en forma vertical en la interfaz de usuario de vista previa de impresión, en el orden en que las agregaste. La primera opción agregada estará en la parte superior y las demás aparecerán debajo en una secuencia.

Nota Este código se toma de scenario3.js, de la aplicación de muestra PrintSample. Si vas a agregar este código a tu aplicación, asigna las opciones de impresión que quieras mostrar al usuario en la interfaz de usuario de vista previa de impresión.

Importante Si llamas a printTask.options.displayedOptions.clear(), se quitarán todas las opciones de impresión de la interfaz de usuario de vista previa de impresión; solo quedará el vínculo Más configuraciones. Asegúrate de usar el método append para especificar las opciones que deseas mostrar en la interfaz de usuario de vista previa de impresión.

function onPrintTaskRequested(printEvent) {
    var printTask = printEvent.request.createPrintTask("Print Sample", function (args) {
        args.setSource(MSApp.getHtmlPrintDocumentSource(document));

        // Choose the printer options to be shown.
        // The order in which the options are appended determines the order in which they appear in the UI
        printTask.options.displayedOptions.clear();
        printTask.options.displayedOptions.append(Windows.Graphics.Printing.StandardPrintTaskOptions.copies);
        printTask.options.displayedOptions.append(Windows.Graphics.Printing.StandardPrintTaskOptions.mediaSize);
        printTask.options.displayedOptions.append(Windows.Graphics.Printing.StandardPrintTaskOptions.orientation);
        printTask.options.displayedOptions.append(Windows.Graphics.Printing.StandardPrintTaskOptions.duplex);

        // Preset the default value of the printer option
        printTask.options.mediaSize = Windows.Graphics.Printing.PrintMediaSize.northAmericaLegal;

        // Register the handler for print task completion event
        printTask.oncompleted = onPrintTaskCompleted;
    });
}

Compila y prueba tu aplicación como se especificó anteriormente.

Observaciones

Para ver más escenarios de impresión para aplicaciones de la Tienda Windows, consulta la aplicación de muestra PrintSample.

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