앱에서 바로 인쇄 단추를 사용하여 인쇄하는 방법(HTML)

아티클
12/11/2015

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

이 자습서에서는 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: 인쇄 단추 추가

이 단계에서는 화면에 인쇄 단추를 추가하고 인쇄 단추의 클릭 이벤트 처리기를 만듭니다.

단추를 표시하려는 앱 화면에 추가합니다. 인쇄 단추가 인쇄할 콘텐츠에 방해가 되지 않도록 합니다.

이 예제는 인쇄 샘플 샘플 앱의 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();
}
```
인쇄 단추를 단추 클릭 이벤트 처리기에 연결합니다. 이 작업은 화면을 만들기 위해 호출되는 WinJS.UI.Pages.define 함수에 대한 members 매개 변수의 ready 멤버에서 수행되므로 화면이 완전히 로드된 후에 할당이 발생합니다.
```
document.getElementById("Print").addEventListener("click", PrintButtonHandler, false);
```
앞에서 설명한 대로 앱을 빌드하고 테스트합니다.

다음을 통해 공유