How to Make a Print or Save a Page Button With JavaScript

Learn how to make a button that opens your browser’s print or save file window prompt when you click on it.

If you want to print or save a page on any given website, you can go to your browser (usually the top left corner):

• Click on File → Print → and either click the Save button to save the file as a PDF document, or print it with your printer.
• Print/Save shortcut: cmd + p (Mac) / ctrl + p (Windows).

But what if you want to make it even easier for your user to print or save a page, by providing them with a print or save file button that instantly opens up the browsers Print prompt window on click?

No problem, first let’s create a button with a fitting class name:

<button class="button-print-or-save-document">Print or Save Document</button>

Now let’s make the button interactive with JavaScript:

const buttonPrintOrSaveDocument = document.querySelector(
  ".button-print-or-save-document"
)

function printOrSave() {
  window.print()
}

buttonPrintOrSaveDocument.addEventListener("click", printOrSave)

Now you can reuse this button element on any web page where you want to provide a quick print or save document option to your users.

How the code works

• First, we select the button with the button-print-or-save-document class and store a reference to it in a const variable (buttonPrintOrSaveDocument).
• Then we make a named function declaration printOrSave() that executes the window.print method when it’s called.
• Finally, we set up an event listener with two arguments: one that listens for a click event on the button element, and another to call the printOrSave function.

Check the demo code.