제브라 라벨 프린터 웹 브라우저 출력 기능 구현 정리

제브라 라벨 프린터를 웹 브라우저를 이용한 웹 어플리케이션에서 출력하는 기능을 구현하는 개발 방법에 대해 정리하는 시간 가져볼게요.

제브라 라벨 프린터 웹 출력

라벨 프린터는 제조업 또는 물류에서는 거의 필수로 사용하는 제품 중 하나일텐데요.

저희는 제브라 라벨 프린터를 기본으로 많이 사용하고 있습니다.

기존 C# 등 윈도우 프로그래밍에서는 윈도우 프린터 디바이스에 쉽게 접근하고 프린팅 명령도 날릴 수 있는데요.

웹 브라우저를 통해서 출력하게 되면 이야기가 조금 달라집니다.

기본적으로 브라우저의 보안 정책상 클라이언트의 장치에 접근하기가 쉽지 않고, 일반적인 프린팅은 웹 브라우저 프린트 대화상자가 나와 ZPL을 이용한 출력은 불가능에 가깝습니다.

이번에 웹 어플리케이션에서 제브라 라벨 프린터를 ZPL을 이용해 바코드 및 라벨 출력하는 기능을 구현한 내용을 정리해보도록 하겠습니다.

우선 제브라 라벨 프린터를 웹에서 출력하기 위해서는 Zebra Browser Print 프로그램을 설치해야 합니다.

Zebra Browser Print는 라벨 프린트를 사용할 클라이언트에도 설치를 해야 라벨 출력이 가능합니다.

윈도우 하단의 백그라운드 프로그램 목록에 실행되어 있으며, Setting 메뉴에 들어가보면 제브라 프린터 목록이 보입니다.

settins 부분의 Device 및 Accepted는 코드 구현되면 채워지게 됩니다.

이외에도 Accepted Hosts 목록이 보이게 되는데요. 이 목록에 포함이 되어야 제브라 라벨 프린터에 프린터 명령을 보낼 수 있습니다.

Localhost의 경우에는 문제 없이 가능하지만, 현재 설치된 시스템외에 타 서버에서 구동하는 웹사이트의 경우에는 CORS 정책에 의해 https 프로토콜을 사용하고 있어야 Accepted Hosts에 추가될 수 있습니다.

http프로토콜로 운영중이라면, SSL 인증서를 구매하거나, openSSL을 이용해 자체 발급 인증서를 사용할 수 있습니다.

제브라 라벨 프린터 웹 출력을 구현하기 위해 자바스크립트 파일을 연결해줘야 합니다. 연결할 자바스크립트 파일은 Zebra Browser Print가 설치된 폴더에 위치해있습니다.

자바스크립트 경로 - C:\Program Files (x86)\Zebra Technologies\Zebra Browser Print\Documentation\BrowserPrint.js-3.1.250

기본적으로 프로젝트에 포함되어야할 자바스크립트 파일

위의 기본적인 자바스크립트 파일외에 페이지가 로드되면 라벨 프린터를 사용할 수 있게 setup해주는 코드가 필요하게 됩니다.

Helper 자바스크립트에는 초기 setup과 라벨 출력 메서드가 포함되어 있습니다.

여기서 초기 프린터 setup과 프린터 전송을 메서드로 빼서 별도의 자바스크립트로 구현했습니다.

이제 비즈니스 로직을 작성하고 ZPL 문자열을 writeToSelectedPrinter 메서드에 전달하면 정상적으로 라벨이 정상적으로 출력되게 됩니다.

setup메서드의 경우 DOM문서가 로드될 때 실행하여 라벨 프린터를 검색하고 Zebra Browser Print 목록에 추가할 수 있도록 해주어야 합니다.

진행하시다 막히시거나 추가 문의사항은 댓글 달아주시면 답변드리도록하겠습니다.

별도로 제브라 라벨 프린터 라벨 스크립트 제작 및 프로그램 구현이 필요하신 분은 아래 카톡으로 연락주시기 바랍니다.