webdevpuneet.com

Related Snippets

91 in Buttons category
29–34 of 60

Print This Page Button

Upvote / Downvote Widget

Shake to Undo

Long-Press Confirm with Radial Fill

Fullscreen API Toggle Button

Push Notification Subscription Toggle

Print This Page Button — Free HTML CSS JS window.print() Snippet

Print This Page Button · Buttons · Plain HTML, CSS & JS · Live preview

CategoryButtons
TagsKeyboard NavigationSVGAccessibilityMicro-Interactions

Copy & paste

Source Code

<div class="page">
  <nav class="no-print topbar">
    <span class="brand">Invoice #A-2045</span>
    <button class="print-btn" onclick="window.print()">
      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
      Print this page
    </button>
  </nav>

  <main class="document">
    <header class="doc-header">
      <h1>Invoice</h1>
      <p>Invoice #A-2045 &middot; Issued Aug 25, 2026</p>
    </header>
    <table class="doc-table">
      <thead>
        <tr><th>Item</th><th>Qty</th><th>Price</th><th>Total</th></tr>
      </thead>
      <tbody>
        <tr><td>UI Snippets Pro plan</td><td>1</td><td>$29.00</td><td>$29.00</td></tr>
        <tr><td>Extra seats</td><td>3</td><td>$9.00</td><td>$27.00</td></tr>
      </tbody>
      <tfoot>
        <tr><td colspan="3">Total due</td><td>$56.00</td></tr>
      </tfoot>
    </table>
    <p class="doc-footer">Thank you for your business. Questions? Contact [email protected].</p>
  </main>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Uses the native window.print() API — no custom print-preview rendering to build
Companion @media print stylesheet hides anything tagged .no-print from printed output
Reusable .no-print class scales to any number of on-screen-only elements
Print styles strip background color, shadows, and padding so the page prints cleanly
max-width constraint is lifted in print mode since paper has its own margins
!important on the no-print rule guards against on-screen specificity leaking into print
Works with the browser's native print preview for fast iteration without wasting paper
Zero JavaScript beyond the single window.print() call — extremely lightweight
Compatible with save-as-PDF flows most browsers offer inside the print dialog
No framework, no PDF generation library, no build step required

About this UI Snippet

Print Button — HTML, CSS & JavaScript window.print() Snippet

Screenshot of the Print This Page Button snippet rendered live

Invoices, receipts, tickets, and reports often need a simple "Print this page" affordance. The browser already has everything required — a native print dialog triggered by window.print() — but a good print button also needs a companion @media print stylesheet so navigation, buttons, and other on-screen-only chrome don't end up on the printed page.

This snippet shows both halves of that pattern in plain HTML, CSS, and vanilla JavaScript.

The button itself

The button's onclick is literally window.print() — a single native browser API call that opens the OS-level print dialog (or a save-as-PDF flow on many systems). There's no custom print-preview rendering to build; the browser and the @media print stylesheet do all the work between them.

How the @media print stylesheet works

Everything meant to disappear when printed carries a .no-print class — here, that's the topbar containing the page title and the print button itself (there's no reason to print a button that triggers printing). Inside @media print, the rule .no-print { display: none !important; } removes those elements only from the print rendering; on screen, they render completely normally. The !important guards against any more specific on-screen rule accidentally leaking into print.

The rest of the print block strips visual chrome that only makes sense on a lit screen: the page's colored background reverts to white, the document card's shadow and padding are removed so it fills the printed page edge-to-edge, and the container's max-width constraint is lifted since printed paper has its own margins.

Why use a class instead of inline styles

Using a single reusable .no-print class means any future element — a "share" button, a cookie banner, a chat widget — can be excluded from print output just by adding that one class, without writing new @media print rules each time.

Testing the print output

Most browsers' print preview (Ctrl/Cmd+P) renders the @media print styles exactly as they'll appear on paper or in a saved PDF, so you can iterate on the stylesheet without wasting paper.

Step by step

How to Use

  1. 1
    Load the snippetClick "Print This Page Button" in the sidebar Library tab to see a mock invoice document with a print button in its top bar.
  2. 2
    Click the print buttonClick "Print this page" to open your browser's native print dialog. Use its preview pane to see the print-only styling applied.
  3. 3
    Notice what disappearsIn the print preview, confirm the top bar and button are gone — only the invoice document itself is shown, matching the .no-print rule.
  4. 4
    Mark more elements as no-printIn the HTML panel, add class="no-print" to any other element (a sidebar, a chat widget) you want excluded from the printed output.
  5. 5
    Adjust the print-only stylesIn the CSS panel, edit the @media print block to add page-break rules, adjust margins, or set specific font sizes for print.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for React, or "Tailwind" for React + Tailwind CSS — the print behavior carries over unchanged.

Real-world uses

Common Use Cases

Invoices and receipts
Let customers print or save a clean PDF copy of an invoice or receipt without any navigation chrome cluttering the output.
Learn the @media print pattern
Study how a single reusable class combined with a print-only media query controls exactly what appears on paper versus on screen.
Prototype reports and tickets
Drop this into any admin panel or dashboard prototype where users need a physical or PDF copy of a generated report or ticket.
Fine-tune print typography
Adjust font sizes, margins, and page-break rules inside @media print independently of your on-screen design.
Keep native browser shortcuts working
Because this uses the real print API, Ctrl/Cmd+P keyboard shortcuts continue to work exactly as users expect, in addition to the button.
Extend to multi-page print layouts
Use page-break-before/after CSS properties inside the print media query to control where a long report splits across printed pages.
Related: WebAuthn Security Key Prompt
See the WebAuthn Security Key Prompt for a related buttons pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Not directly — it opens the browser's native print dialog via window.print(). Most modern browsers let the user choose "Save as PDF" as a destination inside that same dialog, which produces a PDF without any extra library.

Add class="no-print" to that element. The @media print stylesheet in the CSS panel applies display: none !important to any element with that class, but only when the page is being printed — it renders normally on screen.

It ensures the print-hiding rule wins even if a more specific on-screen CSS rule targets the same element with its own display value, guaranteeing the element is reliably excluded from every print job.

Yes. Add page-break-before: always or page-break-after: always (or the modern break-before/break-after equivalents) to specific elements inside the @media print block to force a new printed page at that point.

No, by design — the @media print block resets the background to white and removes box-shadow and border-radius from the document container so it looks like a clean printed document rather than a screenshot of a web card.

Yes. Because this uses the browser's real print functionality rather than a custom modal, the standard Ctrl/Cmd+P keyboard shortcut continues to trigger the exact same print dialog and the same @media print styling.

Open your browser's print dialog (Ctrl/Cmd+P) and use its built-in preview pane — it renders the @media print CSS exactly as it will appear on paper or in a saved PDF, so you can iterate on the stylesheet safely.

Yes. Add an element with display: none by default, then inside @media print override it to display: block (or flex) — this is the inverse of the .no-print pattern and works for anything you want to appear only in the printed output.