빠른 시작: 앱에서 인쇄(HTML)

아티클
12/11/2015

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

이 빠른 시작에서는 Windows 스토어 앱에 인쇄 기능을 추가하는 가장 간단한 방법에 대해 설명합니다.

프로세스를 간단히 살펴보려면 이 짧은 동영상을 시청하세요.

Windows 스토어 앱에서 인쇄하는 가장 간단한 방법은 Windows 인쇄를 사용하는 것입니다. Windows 인쇄를 사용하려면 앱이 다음 조건을 갖추어야 합니다.

사용자가 인쇄할 수 있게 하려는 앱의 각 보기에서 인쇄 계약을 등록해야 합니다.

인쇄 계약 등록은 PrintManager 개체 가져오기, PrintTask 개체 만들기, 인쇄 이벤트 처리를 의미합니다.
인쇄할 형식의 콘텐츠를 제공해야 합니다.

이 빠른 시작에 나오는 기본 인쇄 환경은 Windows에서 앱의 화면을 인쇄하기 위한 것입니다.

참고 특정 페이지 인쇄 또는 사용자 지정 인쇄 설정과 같은 사용자 지정 인쇄 기능은 C++/C#/Visual Basic 및 XAML을 사용하는 Windows 스토어 앱에만 추가할 수 있습니다. 앱에 사용자 지정 인쇄 기능을 추가하는 방법에 대한 자세한 내용은 인쇄(XAML)를 참조하세요.

사전 요구 사항

HTML, JavaScript, Windows 이벤트와 이벤트 처리에 대해 잘 알고 있어야 합니다.
Microsoft Visual Studio가 설치되어 있어야 합니다.
프린터가 설치되어 있어야 합니다.
인쇄를 추가할 앱이 있어야 합니다. 자신이 개발한 앱이 없는 경우 인쇄 샘플 샘플 앱을 다운로드하여 사용할 수 있습니다.참고 이 빠른 시작의 예제는 인쇄 샘플 샘플 앱(영문)에 있습니다.

지침

1. 편집을 위해 앱의 소스 코드 열기

이 절차는 인쇄 샘플 샘플 앱의 PrintSampleJS 앱을 여는 방법에 대한 것입니다. 자신이 개발한 앱을 사용 중인 경우 Visual Studio에서 앱을 열고 다음 단계로 건너뜁니다.

인쇄 샘플 샘플 앱(영문)을 열고 JavaScript 예제를 컴퓨터에 다운로드합니다.
Visual Studio에서 File > Open Project를 클릭하고 앞 단계에서 다운로드한 샘플 앱의 솔루션 파일이 있는 폴더로 이동합니다.
PrintSampleJS 솔루션 파일을 선택하고 열기를 클릭합니다.

2. 앱 빌드 및 테스트

빌드 > 솔루션 빌드를 클릭하여 작업 중인 앱을 빌드합니다. 화면 아래쪽에 있는 출력 창에 오류 메시지가 없는지 확인합니다.
디버그 > 디버깅하지 않고 시작을 클릭합니다.
몇 초 후 화면에 인쇄 샘플 JS 앱이 표시되는지 확인합니다.
앱이 오류 없이 실행되면 Visual Studio로 돌아간 다음 디버그 > 디버깅 중지를 클릭합니다.

3. Windows 인쇄 등록

이제 앱 화면에 일부 콘텐츠가 표시될 것입니다.

앱에 인쇄 기능을 추가하는 첫 번째 단계는 인쇄 계약을 등록하는 것입니다. 고객이 인쇄할 수 있도록 할 모든 화면에 대해 앱에서 이 작업을 수행해야 합니다.

참고 사용자에게 표시되는 화면에서만 인쇄를 등록 할 수 있습니다. 앱의 한 화면에서 인쇄를 등록한 경우 이 화면을 나갈 때 인쇄 등록을 취소해야 합니다. 이 화면이 다른 화면으로 바뀔 경우 다음 화면이 열릴 때 새 인쇄 계약을 등록해야 합니다.

인쇄 계약 등록은 PrintManager 개체를 가져오고 PrintTaskRequested 이벤트에 대한 처리기를 정의하는 것을 의미합니다.

인쇄할 앱의 각 화면에 화면이 열릴 때 실행되도록 다음 코드를 추가합니다. PrintSampleJS 샘플 앱에서 이 작업은 화면을 만들기 위해 호출되는 WinJS.UI.Pages.define 함수에 대한 members 매개 변수의 ready 구성원에서 수행됩니다.
```
var printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView();
printManager.onprinttaskrequested = onPrintTaskRequested;
```
참고 이 코드를 PrintSampleJS 샘플 앱에서와 같이 별도의 함수에 포함시킬 수 있습니다.
해당 화면에 대한 인쇄 작업 이벤트 처리기를 추가합니다. 예를 들어 화면별로 인쇄할 콘텐츠 형식을 다르게 지정해야 하는 경우 화면마다 다른 함수가 필요할 수 있습니다.

이 인쇄 샘플 JS 앱은 여기에 나온 완료 처리기를 포함합니다. 완료 이벤트를 처리하는 것은 오류가 발생했을 때 이를 사용자에게 알리고 가능한 해결 방법도 제공할 수 있으므로 좋은 방법입니다. 또한 인쇄 작업이 성공한 후 사용자가 수행할 다음 단계를 안내하는 데도 완료 이벤트를 사용할 수 있습니다.
```
function onPrintTaskRequested(printEvent) {
    var printTask = printEvent.request.createPrintTask("Print Sample", function (args) {
        args.setSource(MSApp.getHtmlPrintDocumentSource(document));

        // Register the handler for print task completion event
        printTask.oncompleted = onPrintTaskCompleted;
    });
}
```
```
function onPrintTaskCompleted(printTaskCompletionEvent) {
    // Notify the user about the failure
    if (printTaskCompletionEvent.completion === Windows.Graphics.Printing.PrintTaskCompletion.failed) {
        WinJS.log && WinJS.log("Failed to print.", "sample", "error");
    }
}
```
앞에서 설명한 대로 앱을 빌드하고 테스트합니다.

4. 앱에서 인쇄

앱을 수정하고 빌드한 후 디버거에서 개 기능을 테스트합니다.

디버그 > 디버깅 시작을 클릭합니다.
몇 초 후 화면에 인쇄 샘플 JS 앱이 표시되는지 확인합니다.
화면 오른쪽에서 살짝 밀어 참 메뉴를 표시합니다.
장치 참 메뉴를 선택합니다.
프린터를 선택합니다. 인쇄 창이 나타납니다.
인쇄 창에서 인쇄 단추를 클릭하여 현재 화면의 콘텐츠를 인쇄합니다.
인쇄 결과를 검토합니다.

요약 및 다음 단계

이 빠른 시작에서는 사용자가 앱을 조작하는 방법이나 앱이 인쇄용 콘텐츠 형식을 지정하는 방법을 수정하지 않고 Windows 인쇄를 앱에 추가했습니다.

지금부터는 좀 더 고급 기능을 살펴볼 수 있습니다. 앱에서 바로 인쇄 단추를 사용하여 인쇄하는 방법에서는 사용자가 Windows 스토어 앱에서 인쇄하기 위해 클릭할 수 있는 인쇄 단추를 추가합니다.

참고

JavaScript 함수 window.print()를 사용하여 앱의 콘텐츠를 인쇄할 수 있지만 **window.print()**는 기본 인쇄 환경을 사용하여 화면에 표시되는 콘텐츠를 인쇄하기 위한 것입니다. Windows 스토어 앱 화면이 항상 좋은 인쇄 결과를 만들지는 못하므로 **window.print()**를 호출하는 것이 최선의 방법이 아닐 수 있습니다. 최적의 사용자 환경을 제공하려면 Windows 런타임 함수를 사용하고 이러한 항목에서 설명하는 인쇄 계약을 등록하는 것이 좋습니다.

Windows 스토어 앱에서 사용할 수 있는 다른 인쇄 시나리오를 보려면 인쇄 샘플 샘플 앱을 참조하세요.

다음을 통해 공유