브라우저의 인쇄 또는 저장을 여는 버튼을 만드는 방법 알아보기 파일 창을 클릭하면 프롬프트가 표시됩니다.
특정 웹사이트에서 페이지를 인쇄하거나 저장하려면 브라우저(일반적으로 왼쪽 상단)로 이동하세요.
- 파일 → 인쇄 →를 클릭합니다. 저장을 클릭하거나 버튼을 눌러 파일을 PDF 문서로 저장하거나 프린터로 인쇄하세요.
- 인쇄/저장 바로가기: cmd + p(맥) / ctrl + p(윈도우)
그러나 클릭 시 브라우저에서 즉시 인쇄 프롬프트 창을 여는 인쇄 또는 파일 저장 버튼을 제공하여 사용자가 페이지를 훨씬 쉽게 인쇄하거나 저장할 수 있도록 하려면 어떻게 해야 할까요?
문제 없습니다. 먼저 적절한 클래스 이름을 가진 버튼을 만들어 보겠습니다.
<button class="button-print-or-save-document">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). - 그런 다음 명명된 함수 선언을 만듭니다.
printOrSave()window.print를 실행합니다. 메서드가 호출될 때. - 마지막으로 두 개의 인수로 이벤트 리스너를 설정합니다. 하나는
click버튼 요소에 대한 이벤트 및printOrSave를 호출하는 다른 이벤트 기능.
데모 코드를 확인하세요.