如何使用應用程式內的列印按鈕來列印 (HTML)

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

本教學課程說明如何將列印按鈕新增到 Windows 市集應用程式。

根據預設，使用者可以從裝置常用鍵選取列印裝置，以便從應用程式進行列印。您可以在使用者按一下按鈕時呼叫 ShowPrintUIAsync，藉此讓使用者從您的應用程式 UI 初始化列印工作。

藍圖： 這個主題與其他主題的相關性？請參閱：

使用 JavaScript 建立 Windows 市集應用程式的藍圖

您必須知道的事

技術

Windows 執行階段

先決條件

您必須熟悉 HTML、JavaScript、Windows 事件和事件處理。
Microsoft Visual Studio 必須已經安裝完成。
印表機必須已經安裝完成。
您必須有要在其中新增列印按鈕的 Windows 市集應用程式。如果您沒有自己的應用程式，可以下載列印範例範例應用程式並使用該應用程式。
您的應用程式必須支援基本的 Windows 列印。如果不支援，請檢閱快速入門：從應用程式列印，了解如何在應用程式中新增基本的 Windows 列印支援。

指示

步驟 1: 在 Visual Studio 中開啟您的應用程式

本教學課程中描述的程序參考列印範例範例應用程式中的 PrintSampleJS 應用程式。如果要將列印按鈕新增至您自己的應用程式，請在 Visual Studio 中開啟您的應用程式，而不是開啟列印範例範例應用程式。

開啟列印範例範例應用程式，並將 JavaScript 範例下載到電腦上。
在 Visual Studio 中，按一下 [File] > [Open Project]，然後前往包含範例應用程式 (上個步驟下載的應用程式) 方案檔的資料夾。
選取 PrintSampleJS 方案檔，然後按一下 [開啟]。

步驟 2: 建置和測試應用程式

按一下 [建置]**** > [建置方案]，建置您要使用的應用程式。確定畫面底端的 [輸出]**** 窗格未出現任何錯誤訊息。
按一下 [偵錯] > [啟動但不偵錯]****。
請確認畫面會在數秒後顯示 [列印 JS 範例] 應用程式。
如果應用程式執行無誤，請返回 Visual Studio，然後按一下 [偵錯]**** > [停止偵錯]。

步驟 3: 定義列印時使用的樣式

若要格式化應用程式的列印畫面，請建立階層式樣式表 (CSS) 以定義列印時變更的樣式。

為避免某些顯示的區段出現在列印輸出中—例如您將在本教學課程中新增的列印按鈕—請將這些樣式定義為 display: none。

定義列印時使用的樣式。例如，這是列印範例範例應用程式包含的 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: 新增列印按鈕

在這個步驟中，您會將列印按鈕新增至畫面，而且您將為列印按鈕建立 Click 事件處理常式。

將按鈕新增至應用程式畫面中要放置按鈕的位置。確定按鈕不會干擾您要列印的內容。

這個範例來自列印範例範例應用程式的 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();
}

將列印按鈕與按鈕 Click 事件處理常式連接。這個動作是在呼叫用來建立畫面的 WinJS.UI.Pages.define 函式之 members 參數的 ready 成員中完成，這樣才能在畫面完全載入之後進行指派。
```
document.getElementById("Print").addEventListener("click", PrintButtonHandler, false);
```
依照上面所述建置和測試您的應用程式。