如何使用应用内打印按钮打印 (HTML)

项目
12/11/2015

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

本教程介绍如何在 Windows 应用商店应用中添加打印按钮。

默认情况下，用户通过从“设备”超级按钮中选择打印设备来从应用进行打印。你可以让用户从应用的 UI 启动打印作业，方法是当用户单击某个按钮时调用 ShowPrintUIAsync。

路线图： 本主题与其他主题有何关联？请参阅：

采用 JavaScript 的 Windows 应用商店应用的路线图

你需要了解的内容

技术

Windows 运行时

先决条件

你必须熟悉 HTML、JavaScript、Windows 事件和事件处理。
必须安装了 Microsoft Visual Studio。
必须安装了打印机。
你必须有一个你希望向其添加打印按钮的 Windows 应用商店应用。如果你没有自己的应用，则可以下载 PrintSample 示例应用并使用该应用。
你的应用必须支持基本 Windows 打印。如果还不支持，请查看快速入门：从你的应用打印以了解如何在你的应用中添加基本 Windows 打印支持。

说明

步骤 1: 在 Visual Studio 中打开应用

本教程中所述的过程指的是 PrintSample 示例应用中的 PrintSampleJS 应用。如果你要在自己的应用中添加一个打印按钮，请在 Visual Studio 中（而不是在“打印示例”示例应用中）打开你的应用。

打开 PrintSample 示例应用并将 JavaScript 示例下载到你的计算机。
在 Visual Studio 中，单击“File”>“Open Project”并转到包含你在上一步中下载的示例应用的解决方案文件的文件夹。
选择 PrintSampleJS 解决方案文件，然后单击“打开”。

步骤 2: 生成并测试应用

单击“生成”>“生成解决方案”来生成你要在其上工作的应用。确保屏幕底部的“输出”窗格中没有错误消息。
单击“调试”>“开始执行(不调试)”。****
请确认，在几秒后，屏幕中会显示 PrintJSSample 应用。
如果应用运行且未显示错误，请返回到 Visual Studio，并单击“调试”>“停止调试”。****

步骤 3: 定义打印时要使用的样式

要格式化应用的屏幕以进行打印，请创建一个层叠样式表 (CSS)，该层叠样式表定义打印时将改变的样式。

若要避免显示的部分出现在打印输出中—（例如，你将在本教程中添加的打印按钮），—请将这些样式定义为 display: none。

定义打印时要使用的样式。例如，这是 PrintSample 示例应用包含其以用于定义打印时示例应用使用的样式的 print.css 文件。

#rootGrid
{
    width: 100%;
    height: 100%;
    display: block;
}

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

.article
{
    border:none;
}

通过将以下代码添加到包含打印按钮的屏幕的 HTML 文件的 head 标记中，可以在你的应用中包含样式表。若要确保仅在打印屏幕时才应用此样式表，请务必包含 media="print" 属性。
```
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
```

步骤 4: 添加打印按钮

在此步骤中，你将在屏幕中添加“打印”按钮，并且将会为该“打印”按钮创建单击事件处理程序。

将该按钮添加到你的应用的屏幕上，你希望该按钮出现在该屏幕上。确保它不会干扰你要打印的内容。

此示例来自 PrintSample 示例应用中的 scenario2.html。
```
<button id="Print">Print</button>
```

将“打印”按钮事件处理程序添加到你的应用的 JavaScript 代码中。

来自 PrintSample 示例应用中 scenario2.js 的此示例还会添加在打印作业前后由 Windows 打印调用的函数。这些函数在 PrintSample 示例应用中定义但未在其中使用；但可将它们用于已打印内容的预处理和后处理。

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

将“打印”按钮连接到按钮单击事件处理程序。这是在 WinJS.UI.Pages.define 函数（调用它以创建屏幕）的 members 参数的 ready 成员中完成的，因此，该分配操作会发生在屏幕已完全加载之后。
```
document.getElementById("Print").addEventListener("click", PrintButtonHandler, false);
```
如上所述生成并测试你的应用。

Share via