Печать с помощью встроенной кнопки печати в приложении (HTML)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

В этом учебнике показано, как добавить кнопку печати в приложение Магазина Windows.

По умолчанию для печати из программы пользователь выбирает устройство печати с помощью чудо-кнопки "Устройства". Вы можете разрешить пользователю инициировать задание печати из интерфейса вашего приложения, вызывая метод ShowPrintUIAsync, когда пользователь нажимает кнопку.

Схема: как эта тема связана с другими? См.:

Схема создания приложений Магазина Windows с помощью JavaScript

Что необходимо знать

Технологии

Среда выполнения Windows

Необходимые условия

Вы должны быть знакомы с HTML, JavaScript, событиями Windows и обработкой событий.
На вашем компьютере должна быть установлена Microsoft Visual Studio.
В системе должен быть установлен принтер.
У вас должно быть приложение Магазина Windows, в которое вы хотите добавить кнопку печати. Если у вас нет собственного приложения, вы можете скачать и использовать пример приложения "Образец печати".
Ваша программа должна поддерживать основные возможности печати Windows. Если это не так, см. Краткое руководство: печать из приложения, чтобы узнать, как добавить в свою программу поддержку основных возможностей печати Windows.

Инструкции

Этап 1: Открытие приложения в Visual Studio

Процедура, описанная в этом учебнике, относится к приложению PrintSampleJS из примера приложения для печати. Если вы добавляете кнопку печати в собственное приложение, откройте его в Visual Studio вместо примера приложения печати.

Откройте пример приложения "Образец печати" и скачайте пример JavaScript на свой компьютер.
В Visual Studio щелкните File (Файл) > Open Project (Открыть проект) и перейдите в папку с файлом решения примера приложения, скачанного на предыдущем этапе.
Выберите файл решения PrintSampleJS и нажмите кнопку Открыть.

Этап 2: Создание и тестирование приложения

Чтобы выполнить сборку приложения, над которым вы работаете, щелкните Сборка > Собрать решение. Убедитесь, что на панели Вывод в нижней части экрана нет сообщений об ошибках.
Выберите пункты меню Отладка > Запуск без отладки.
Убедитесь, что через несколько секунд на экране отображается приложение Print JS Sample,
Если приложение выполняется без ошибок, вернитесь в Visual Studio и выберите Отладка > Остановить отладку.

Этап 3: Определение стилей, используемых при печати

Чтобы отформатировать экран программы для печати, создайте каскадную таблицу стилей (CSS), в которой определяются стили, изменяющиеся при печати.

Чтобы на печать не выводились определенные отображаемые участки, —например кнопка печати, которую вы добавите в этом учебнике—, определите эти стили как display: none.

Определите стили, используемые при печати. Например, вот файл print.css, который определяет стили, используемые при печати, в примере приложения "Образец печати".
```
#rootGrid
{
    width: 100%;
    height: 100%;
    display: block;
}

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

.article
{
    border:none;
}
```
Включите эту таблицу стилей в свою программу, добавив следующий код в тег head HTML-файла для экрана с кнопкой печати. Чтобы эта таблица стилей применялась только при печати экрана, не забудьте включить атрибут media="print".
```
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
```

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

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

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

Этот пример взят из файла scenario2.html в примере приложения "Образец печати".
```
<button id="Print">Print</button>
```
Добавьте обработчик событий для кнопки печати в код JavaScript своего приложения.

В этом примере из файла scenario2.js в примере приложения "Образец печати" также добавлены функции, которые будут вызываться до и после задания печати Windows. В примере приложения "Образец печати" эти функции определены, но не используются. Однако их можно использовать для предварительной или завершающей обработки содержимого, отправляемого на печать.
```
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();
}
```
Подключите кнопку печати к обработчику события для нажатия кнопки. Подключение осуществляется в члене ready параметра members функции WinJS.UI.Pages.define, которая вызывается для создания экрана. Таким образом, назначение происходит после того, как экран загрузится полностью.
```
document.getElementById("Print").addEventListener("click", PrintButtonHandler, false);
```
Создайте и протестируйте приложение, как описано выше.

Связанные разделы

Пример печати приложения Магазина Windows

Краткое руководство: печать из приложения

Поделиться через