如何使用应用内打印按钮打印 (HTML)
[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发,请参阅 最新文档 ]
本教程介绍如何在 Windows 应用商店应用中添加打印按钮。
默认情况下,用户通过从“设备”超级按钮中选择打印设备来从应用进行打印。你可以让用户从应用的 UI 启动打印作业,方法是当用户单击某个按钮时调用 ShowPrintUIAsync。
路线图: 本主题与其他主题有何关联?请参阅:
你需要了解的内容
技术
先决条件
- 你必须熟悉 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);
如上所述生成并测试你的应用。