버튼을 클릭하면 브라우저의 인쇄 또는 파일 저장 창이 바로 열리도록 만드는 방법을 알아봅니다.
웹사이트의 페이지를 인쇄하거나 저장하고 싶다면 보통 브라우저 메뉴(대체로 화면 왼쪽 상단)를 이용합니다.
- 파일(File) → 인쇄(Print)를 차례로 클릭한 뒤, Save(저장) 버튼을 눌러 PDF 문서로 저장하거나 프린터로 바로 출력할 수 있습니다.
- 인쇄/저장 단축키: cmd + P(Mac) / ctrl + P(Windows)
하지만 사용자가 매번 브라우저 메뉴를 찾아 들어가게 하는 대신, 클릭 한 번으로 인쇄 창이 즉시 열리는 '인쇄·저장' 버튼을 페이지에 직접 제공하면 어떨까요? 훨씬 더 편리한 사용자 경험을 만들 수 있습니다.
생각보다 간단합니다. 먼저 적절한 클래스 이름을 가진 버튼부터 만들어 보겠습니다.
<button class="button-print-or-save-document">문서 인쇄 또는 저장</button>모두가 읽기 쉬운 코드를 작성하세요!
클래스, 변수, 함수의 이름은 위 예제처럼 길더라도 명확하게 지어주는 것이 좋습니다. btn-pos-d처럼 짧게 축약된(암시적인) 이름은 나중에 아무도 알아보기 어렵습니다. 읽기 편한 코드가 결국 유지보수도 쉬운 코드입니다.
이제 JavaScript로 버튼에 실제 동작을 연결해 보겠습니다.
const buttonPrintOrSaveDocument = document.querySelector(
".button-print-or-save-document"
)
function printOrSave() {
window.print()
}
buttonPrintOrSaveDocument.addEventListener("click", printOrSave)완성입니다! 이 버튼 요소는 사용자에게 빠른 인쇄·문서 저장 기능을 제공하고 싶은 어떤 웹 페이지에서든 그대로 가져다 재사용할 수 있습니다.
코드 동작 원리
- 먼저
button-print-or-save-document클래스를 가진 버튼을 선택해, 그 참조를const변수(buttonPrintOrSaveDocument)에 저장합니다. - 그다음 호출될 때
window.print()메서드를 실행하는 이름 있는 함수 선언printOrSave()를 만듭니다. - 마지막으로 두 개의 인자를 받는 이벤트 리스너를 등록합니다. 첫 번째는 버튼 요소에서 발생하는
click이벤트를 감지하는 역할이고, 두 번째는 해당 이벤트가 발생했을 때 호출할printOrSave함수입니다.
window.print()는 모든 주요 브라우저에서 지원되며, 열리는 대화상자에서 사용자는 프린터로 출력하거나 'PDF로 저장' 옵션을 선택해 파일로 내려받을 수 있습니다. 필요하다면 CSS의 @media print 규칙을 함께 활용하면 인쇄용 화면을 따로 디자인할 수도 있습니다.