31 день Windows 8 для HTML5 | День № 20: Печать

Очевидно, что это намного лучше работает на листе бумаги. Но разве я не мог просто использовать медиа-запрос, потому что это кажется гораздо более сложным в HTML5? Да, вы можете сделать то же самое. Это работает точно так же, как в браузере.

@media print {
    body {

        width: 100%;
        height: 100%;

        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 1fr;
    }

    #content {
        -ms-grid-column: 1;
        -ms-grid-row: 1;

        text-align: left;
    }

}

Конечно, это не что иное, как то, что мы уже сделали на наших веб-сайтах сегодня.

Добавление кнопки печати

До сих пор мы использовали встроенные устройства Dems Charms для отправки чего-либо на устройство, которое утверждает, что оно может печатать. Хотя рекомендуется всегда использовать брелок для устройств, в некоторых случаях в вашем приложении должна быть своя кнопка печати. Если это действительно так, мы можем легко сделать это, показав тот же пользовательский интерфейс печати, что и Devices Charm.

Для этого я добавил на свой экран кнопку, которая будет запускать обработчик, который вы увидите ниже.

_printThis.addEventListener("click", function () {
    Windows.Graphics.Printing.PrintManager.showPrintUIAsync();
}, false);

Теперь, чтобы показать PrintUI, ваш экран все равно должен будет зарегистрироваться в Диспетчере печати, как мы делали в начале этой статьи. После добавления нашей кнопки печати это приводит к нежелательному побочному продукту. Теперь у нас есть этот элемент кнопки на нашем экране. Мех ..

При разработке нашего UX нам действительно захочется подумать о наших экранах, контенте и о том, как мы планируем его трансформировать. К счастью, движение к более отзывчивой сети уже некоторое время ведет нас по этому пути. Но давайте избавимся от этой кнопки для нашего вида печати. Мы можем просто обновить наш медиа-запрос или нашу отдельную таблицу стилей, чтобы удалить этот элемент.

@media print {
    /* .... */ 

    button {
        display: none;
    }
}

Параметры

У вас есть варианты! Давайте начнем с рассмотрения того, что называется стандартными опциями . Эти параметры отображаются в правой части окна предварительного просмотра документа. Вы можете видеть, что я выделил их красным ниже.

По умолчанию всегда представлены одни и те же три свойства (если вы их не очистите); Копии , ориентация и цветовой режим . Теперь у нас есть возможность изменить это. Давайте предположим , что мы только хотим представить опцию Цветовой режим. Я просто очищаю свой список и добавляю обратно те, которые хочу.

_printView.onprinttaskrequested = function (eventArgs) {
    var printTask = eventArgs.request.createPrintTask("31 Days", function (args) {

        printTask.options.displayedOptions.clear();
        printTask.options.displayedOptions
            .append(_printing.StandardPrintTaskOptions.colorMode);

        args.setSource(MSApp.getHtmlPrintDocumentSource(document));
    });
};

Теперь, независимо от того, что я выбрал для отображения в меню настроек стандартов, когда пользователь выбирает подробное меню настроек, они будут представлены вместе с ним.

Мы также можем выбрать то, что мы считаем настройкой по умолчанию. Возможно мы действительно хотели, чтобы Цветовой режим был установлен в оттенках серого, а не в цвете.

printTask.options.colorMode = _printing.PrintColorMode.grayscale;

Конечно, мы также можем добавить в стандартный список. Допустим, вам нужны параметры по умолчанию + двусторонняя печать. Вместо того, чтобы очистить список по умолчанию, вы просто добавили бы к нему.

printTask.options.displayedOptions
    .append(_printing.StandardPrintTaskOptions.duplex);

Теперь со всем этим, единственная опция, поддерживаемая вашим устройством, это те, которые будут показаны. Отличный способ убедиться в этом в действии — выбрать XPS Document Writer, а не принтер. Независимо от того, что вы только что установили, это не для XPS.

А как насчет пользовательских функций печати ? Хорошо, что в настоящее время HTML5 \ JavaScript не поддерживается, как в XAML \ C #.

Другие события

Как и на любой странице, важно понимать нашу навигационную модель и когда мы должны загружать и выгружать наши события. То же самое относится и к печати. Есть 4 события как часть PrintTask ; Завершено, предварительный просмотр, прогресс и отправка.

Я не собираюсь проходить через все события, но я хочу посмотреть на завершенные, так как это единственное место, которое мы можем увидеть, если бы мы действительно могли печатать.

_printView.onprinttaskrequested = function (eventArgs){
    var printTask = eventArgs.request.createPrintTask("31 Days", function (args) {

        printTask.oncompleted = printCompleted;

        /* .... */
    });

function printCompleted(eventArgs) {

    switch (eventArgs.completion) {
        case _printing.PrintTaskCompletion.failed:
            break;
        case _printing.PrintTaskCompletion.submitted:
            break;
        case _printing.PrintTaskCompletion.abandoned:
            break;
        case _printing.PrintTaskCompletion.canceled:
            break;
        default:
            break;
    }    
}

Как видите, мы регистрируемся на событие, как только наша задача печати создана. Тогда мы можем просто переключить результат и отреагировать так, как считаем нужным. Честно говоря, так и должно быть. Это хорошая вещь.

Резюме

Сегодня мы вступили в договор об устройствах, в частности нашу способность печатать. Я пытался разбить печать таким образом, чтобы она была просто, зная, что сложность печати связана с нашими вариантами использования. Преобразование пикселей на экране в лист бумаги — задача не из легких, а для эффективной работы требуется продуманный дизайн. Это не просто подвиг, и к нему следует относиться так же, как к любой другой функции в вашем проекте разработки. К сожалению, это не то, что мы можем вам помочь.

Если вы хотите загрузить пример кода, который обсуждался в этой статье, щелкните значок ниже:

Завтра мы рассмотрим захват изображений с вашей камеры. Увидимся позже!